While chasing tc39/proposal-temporal#1224 where I mistakenly pasted a ZonedDateTime into JSX, I discovered that:

• react-reconciler doesn't like arbitrary objects (fair)
• calls throwOnInvalidObjectType on such objects, source code of which looks completely fine†
• but said source code gets compiled into ... "foo" + newChild + "bar" ...‡
• at the same time, react explicitly chose not to valueOf() objects in Consider using .valueOf() before providing fragment warning. #4769
• this specific type throws unconditionally on .valueOf (I'm ambivalent about that decision)

† https://github.com/facebook/react/blob/98313aaa7ea58d49eb30ecffc0f9eb6fc1ef467a/packages/react-reconciler/src/ReactChildFiber.new.js#L223-L235

‡ compiled to throw Error( "Objects are not valid as a React child (found: " + (Object.prototype.toString.call(newChild) === '[object Object]' ? 'object with keys {' + Object.keys(newChild).join(', ') + '}' : newChild) + "). If you meant to render a collection of children, use an array instead." );

So, react won't use valueOf to render an element, but will use it to report and error about an element.
Maybe the "compilation" or interpolation of invariant is wrong?
Or perhaps %s handling in invariant is wrong?
Maybe my assumptions are wrong?
Maybe that type is wrong?

React version: 17.0.1

Steps To Reproduce

1. return <div>{ new Temporal.Instant(0n).toZonedDateTimeISO("Europe/Berlin") }</div>;

Link to code example: https://github.com/dimaqq/test-temporal