I have a JS file that exposes a function as shown below (following is sample code):

import ReactDOM from 'react-dom';
import React from 'react';
import Component from './Component';
(function() {
  if (!window || !window.someFunction) {
    window.someFunction = (selector) => {
      ReactDOM.render(<Component />, document.querySelector(selector));
      return objectFromComponent; // I don't know how to do this
    }
  }
})();

When this function is called the component is rendered to the DOM. The Component actually generates a particular object that I would like to be returned somehow to this piece of JS code. I tried the following:

1. Storing in localStorage in Component.jsx and reading from callback in : ReactDOM.render(<Component />, document.querySelector(selector), () => {//listening for storage event});
2. window.parent.postMessage in Component.jsx and event listener for "message" event in the function shown above.

Is there a more elegant way to do it with React itself rather than complicating the logic with localStorage and event listeners?