Replace geomertry does not work with reused keys (ALSO SEE QUESTION #533)

[talkingtab]

I attempted to set up a code sandbox here: https://codesandbox.io/p/github/talkingtab/gitbox/main?import=true

Let me know if I need to do something to it. I am a codesandbox newbie.

This is a visualization of recursive treemaps of a file system directory where a box usually is a directory. clicking a directory box will transform then show a box with the treemap of the selected directory.

The problem is the line below key={i}. When this used, the geometry is messed up after clicking. I was trying to search for a possible cause and discovered question #533. To test if the key is the source of the problem, I replaced
key={i}
with
key={r.boxid}
where the boxid is unique, whereas the index is not. On my home machine this solves the problem, as it does in the code sandbox.

    return (
        <mesh onContextMenu={onContext}>
            {boxes.map((r, i) => {
                let tindex = r.tindex ? r.tindex : r.boxid % 15;
                return (
                    <BoxArea
                        key={i}
                        ref={(el) => addRef(el, i)}
                        r={r}
                        onEffect={() => {
                            console.log("calling next state %s", boxstate);
                            action("faded");
                        }}
                        onClick={(e) => onClick(e, r, i)}
                        tex={btextures[tindex]}
                        tex2={plain}
                    />
                );
            })}
        </mesh>
    );

[talkingtab]

Just to clarify. I have a mesh and inside that (square) mesh, I draw a set of rectangles. The top level looks like this (as it should look).

If one of the boxes, such as the purple one is selected ( clicked), the inner set of rectangles is replaced with a different set - the contents of the purple one. It should look like this. Again filling the out square perfectly.

However, if the key values of the replacement set reuse or duplicate the keys of the first set, the boxes are drawn incorrectly.

When I was getting weird boxes and trying to understand why, I found an old question (#533) that suggested this was an issue with react element keys. I had originally just used the index of the rectangle as the key: key={i}. When I changed that key to a unique key that would never be duplicated,key={r.boxid} the problems was immediately fixed.