const gifBoxsRefs = useRef(new Array()) const [clickedGIFBoxIndex, setClickedGIFBoxIndex] = useState(-1) const [isGIFBoxOpen, setIsGIFBoxOpen] = React.useState(() => [].map((x) => false)); useClickOutside({ current: gifBoxsRefs.current[clickedGIFBoxIndex] }, () => { const newVisibilities = [...isGIFBoxOpen]; newVisibilities[clickedGIFBoxIndex] = false; setIsGIFBoxOpen(newVisibilities); }) const hanldeGIFBoxOpenBtn = (index: any) => { const newVisibilities = [...isGIFBoxOpen]; newVisibilities[index] = !newVisibilities[index]; setIsGIFBoxOpen(newVisibilities); setClickedGIFBoxIndex(index) }; useEffect(() => { const gigBox = gifBoxsRefs.current[clickedGIFBoxIndex] if (gifBoxsRefs.current.length > 0) { if (isGIFBoxOpen[clickedGIFBoxIndex]) { let root = createRoot(gigBox! as HTMLElement); root.render( //**** Here I am getting this error*********** <React.StrictMode> <GIFs /> </React.StrictMode> ) gigBox?.classList.replace('hidden', 'absolute') } else { gigBox?.classList.replace('absolute', 'hidden') } } else { gigBox?.classList.replace('absolute', 'hidden') } }, [isGIFBoxOpen])