While chasing https://github.com/tc39/proposal-temporal/issues/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 https://github.com/facebook/react/issues/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?


<!--
  Please provide a clear and concise description of what the bug is. Include
  screenshots if needed. Please test using the latest version of the relevant
  React packages to make sure your issue has not already been fixed.
-->

React version: `17.0.1`

Steps To Reproduce

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

<!--
  Your bug will get fixed much faster if we can run your code and it doesn't
  have dependencies other than React. Issues without reproduction steps or
  code examples may be immediately closed as not actionable.
-->

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

refs = inst.refs = {};
        }
        if (value === null) {
          delete refs[stringRef];
        } else {
          refs[stringRef] = value;
        }
      };
      ref._stringRef = stringRef;
      return ref;
    } else {
      invariant(
        typeof mixedRef === 'string',
        'Expected ref to be a function, a string, an object returned by React.createRef(), or null.',
      );
      invariant(
        element._owner,
        'Element ref was specified as a string (%s) but no owner was set. This could happen for one of' +
          ' the following reasons:\n' +
          '1. You may be adding a ref to a function component\n' +
          "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
          '3. You have multiple copies of React loaded\n' +
          'See https://reactjs.org/link/refs-must-have-owner for more information.',
        mixedRef,
      );
    }
  }
  return mixedRef;
}
function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {