Injecting Javascript/JQuery in React IFrame

I am trying to embed Grafana dashboard into my react application. I want to hide Grafana Cycle View component and Sidebar using Javascript/JQuery once the dashboard is being loaded in the dialogue box, but I have no success in doing so.

This is my React code that I am trying to do:

const iFrame = useRef(null);

const injectJSiFrame = () => {
        let script = document.createElement("html");
        script.append(`
            <script>
            $('[aria-label="Cycle view mode"]')[0].style.display = 'none';
            </script>
        `);
        iFrame.current.appendChild(script);
    }

return (
        <div>
           <Dialog header="Dashboard" visible={displayDialogue} style={{ width: '90vw' }} footer={renderFooter('displayBasic')} onHide={() => onHide('displayBasic')}>
        <iframe src="dashboard-url" onLoad={injectJSiFrame} width="1300" ref={iFrame} height="1000" frameBorder="0" className="grafana-panel" id="grafanaframe"></iframe>              
           </Dialog>
        </div>
)

I have also tried using Javascript property but still no luck:

document.querySelectorAll('[aria-label="Cycle view mode"]');