I made a iframe
<iframe
className="w-2/3 left-0 top-0 h-full fixed"
src={window.location.href}
ref={iframeRef}
>


</iframe>

Now I have to add one react component inside this iframe which I do using

const iframeRef = useRef<HTMLIFrameElement>(null);


useEffect(() => {

let root: Root | undefined;

const handleLoad = () => {
if (iframeRef.current) {
const iframeDocument = iframeRef.current.contentDocument;
if (iframeDocument) {

if(!root){
const mountPoint = iframeDocument.createElement('div');
mountPoint.id = 'iframe-mount-point';
iframeDocument.body.appendChild(mountPoint);


root = createRoot(mountPoint);
}


root.render(
<React.StrictMode>
<HoverComponen
active={active}
full={fulll}
search={search}
setSearch={setSearch}
iframeDocument={iframeDocument}
/>
</React.StrictMode>
);
}
}
};



// Attach load event listener to ensure the iframe content is ready
const iframe = iframeRef.current;
if (iframe) {
iframe.addEventListener('load', handleLoad);
}

// Cleanup function to remove the event listener and unmount the React component
return () => {
if (iframe) {
iframe.removeEventListener('load', handleLoad);
}
if (root) {
root.unmount(); // Ensure the component is unmounted when the effect is cleaned up
}
};
}, [search, active, fulll, setSearch]);


It gets created on loading but HoverComponent is not re-rendering is active, full any of these fields change

I want to re-render it