I need to render script inside div

Hi I need to render a div element with a script inside of it:

something like:

<div id="div-id-for-squaretile1" style="width: 300px; height: 250px;">
    <script>
      googletag.cmd.push(function() {
        googletag.display('div-id-for-squaretile1');
      });
    </script>
  </div>

I am using a hook in my component:

const GooglePublisherTag = ({ id }) => {
  useGptSlot(id);
  return <div id={id} />;
};

useGptSlot Hook looks like:

const useGptSlot = (id) => {
  useEffect(() => {
    const googletag = window.googletag || { cmd: [] };
    googletag.cmd.push(() => {
      googletag.display(id);
    });
  }, [id]);
};

However my code does not render a script within a div:

it instead outputs:

<div id="div-id-for-squaretile1" data-google-query-id="CLGYq8Hhv-cCFcfbwAodGgcK0g" style="width: 250px; height: 250px;">
  <div id="google_ads_iframe_/21848388897/Development/Geo-Landing_0__container__" style="border: 0pt none; width: 250px; height: 250px;"></div>
</div>

How do I achieve this?