I am trying to embed my nextjs / react website inside a wordpress site. That works so far, but it does not size the iframe properly.

I found a solution, which is for native js, which I need to add to my react app

  function sendHeight() {
    if (parent.postMessage) {
      // replace #wrapper with element that contains 
      // actual page content
      var height = document.getElementById('calendar-wrapper').offsetHeight;
      parent.postMessage(height, '*');
    }
  }

  // Create browser compatible event handler.
  var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
  var eventer = window[eventMethod];
  var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

  // Listen for a message from the iframe.
  eventer(messageEvent, function (e) {

    if (isNaN(e.data)) return;

    sendHeight();

  }, false);

The question which I have is how can I run this properly in my functional component?

For instance if the functional component looks like this:

const Home = () => {
    return (
        <div id="calendar-wrapper">
    ...
}

I am not sure when to call the eventer in the react way.