Bug when deleting element of the array in React 18

[Alexey-Timakov]

It works perfectly well with some sipmle element like P or Li. But when I tried to implement it to more complex components with style and structure like these:

.squares {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2.5rem;
}

.square {
padding: 1rem;
border: 0.2rem solid $border-grey;
border-radius: 0.3rem;
position: relative;
display: grid;
grid-template-rows: repeat(7, 1fr);
row-gap: 1rem;
z-index : //calculated from JSX props
}

<div classname={squares}>
  {squares.map(square => {
    return (
      <div classname={square} />
    )
  }}
</div>

It works ok when I try to add new element to array - animation works properly, but only for the last element. If I add a new element to the start of the array it animate only the last element on rerender.
And I got simmilar bug when try to delete any element from array - it looks that only the last element moves and has animation on rerender.

[dima716]

@Alexey-Timakov hi! Have you managed to solve this issue? I have the similar issue and don't know what the cause of the problem

[Alexey-Timakov]

@Alexey-Timakov hi! Have you managed to solve this issue? I have the similar issue and don't know what the cause of the problem

Unfortunately no, i didn't. Just decided to not use it at all

[hades343]

try adding key to each div in squares.map(...)