Unable to find component with ID "iframe" in webpack bundle

Question

I am currently working on a React project where I am using the react-frame-component along with webpack to encapsulate styles for a widget I am building. I want to insert my styles into the iframe head, and I am using the style-loader with a custom insert function in my webpack configuration. However, I am encountering an issue where webpack seems unable to find my component with the ID "iframe."

//webpack.config.js


{
  loader: 'style-loader',
  options: {
    insert: function insertAtTop(element) {
      var parent = document.querySelector('#iframe');
      return parent.appendChild(element);
    },
  },
}

And here's how I am rendering my component:

import Frame from 'react-frame-component';

function HtmlTagWrapper(Component) {
  const el = document.getElementById('chat-bot');
  const attrs = el.attributes;
  const props = attrToObj(attrs); //custom funtion

  ReactDOM.render(
    <Frame id="iframe">
      {/* ... */}
      <Component {...props} />
      {/* ... */}
    </Frame>,
    el
  );
}

After bundling, I am getting this error related to the line in the insertAtTop function:

Uncaught TypeError: Cannot read properties of null (reading 'appendChild')

I've verified that the element with the ID "iframe" exists in my HTML. What could be causing webpack not to find this component, and how can I resolve this issue?