exampleMove.js

<div className="game-grid-wrapper-character">
  {characters.map((character, index) => {
    const left =
      character[character.isRunning ? "destinationLeft" : "left"];
    const top =
      character[character.isRunning ? "destinationTop" : "top"];
    const spring = useSpring({
      config: {
        duration: 500,
      },
      top,
      left,
      width: blockSize,
      height: blockSize,
      immediate: false,
      onRest: () => {
        const changeStates = endsCharacterAnimation(
          characters,
          gameGrid,
          character.index,
          isRunning,
          blockSize
        );

        if (changeStates.updateGridCharacters) {
          setCharacters(changeStates.characters);
          setGameGrid(changeStates.gameGrid);
        }

        if (changeStates.updateIsRunning) {
          setIsRunning(false);
        }

        if (changeStates.boardFinished) {
          setBoardFinished(true);
          handleBoardFinished(movementCharacter);
        }
      },
    });
    return (
      <animated.div
        className="game-grid-character"
        style={spring}
        key={index}
      >
        <Character {...character.character} />
      </animated.div>
    );
  })}
</div>