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])