Create instance for each popup window instead of rendering everything

I have have a setup where I fetch some data that is used on a page. To start off I iterate over some of the data like this:

<div>
    {data &&
         Object.keys(data).map((keyId: string) => {
             return <MyComponent keyId={keyId} key={keyId} />;
         })
    }
</div>

Then MyComponent looks something like:

const MyComponent= ({ keyId }: Props) => {
    const myData = myZustandStore((state) => state.myData);

    const [data, setData] = useState({});

    useEffect(() => {
        setData(myData[keyId]);
    }, [myData, keyId]);

    const [isWindow, setIsWindow] = useState(false);

    const handleRowClick = () => {
        setIsWindow(true);
    };

    const handleWindowClose = () => {
        setIsWindow(false);
    };

    return (
        <>
            <div onClick={handleRowClick}>
                Click
            </div>

            <myPopupWindow windowOpen={isWindow} handleWindow={handleWindowClose} data={data} keyId={keyId} />
        </>
    );
};

So let's say I have 10 items in my data which I iterate over, giving me 10 divs I can click. As such this work, however, what I am effectively doing is renderen a myPopupWindow for every item, and then with handleRowClick I am just showing the pop-up window that needs to be shown. Hence, whatever I do inside myPopupWindow, e.g. calculations, renderings, etc. is actually done, I just can't see the result unless I click the the item.

In my opinion that just seems like a waste, i.e. rendering everything. In particular if I at some point get 1000 items or more. So what I am asking is: There has to be a more appropriate way to do these things with popups, where it only renders IF it is called?

I've tried putting something like:

if (!WindowOpen) {
    return null;
}

At the top of myComponent. And that somewhat works, but again, it seems like that is not the proper way to do it. Also, it actually fails during builds due to some hook ordering, where it wants it at the bottom of the component, where all rendering has been done anyways.

You can create a state variable to control if the popup window will be rendered at all like so:

const [showWindow, setShowWindow] = useState(false);

Then use it as a conditional for rendering:

{showWindow && <myPopUpWindow/>}

Then just add to the handleRowClick function:

setShowWindow(true);