The help button appears on the webpage, when you click on the help button, it opens an iframe which is the same webpage in a smaller window(iframe).

How do I hide the help button only in the iframe so that another iframe cannot be opened within the iframe.

I have tried query selectors and DOM selectors, but they are not working

xport default function help() {
  const [shown, setShown] = React.useState(false)

//   var myIframe = document.getElementById("iFrameContainer");
//   var divElement = myIframe.contentWindow.document.querySelector(".helpButton");
//   divElement.style.display = "none";

  return (
    <div className="helpButton">
      {shown ? <Helper src="http://localhost:3000/"/> : null}
      <button onClick={() => setShown(!shown)}>
        <img src={helpIcon} alt=""/>
      </button>
    </div>
  );
  
}



const Helper = (props) => {

  // var myIframe = document.getElementById("iFrameContainer");
  // var divElement = myIframe.contentWindow.document.querySelector(".helpButton");
  // divElement.style.display = "none";

  return <div name="iFrameContainer">
    <iframe
      className='frame'
      title={props.src}
      src={props.src}
    />
    </div>
}