Programmatically clear arrows from board

[Epitomaniac]

Need a feature where I can call a function to remove arrows from the board; at the moment, the only way to clear arrows without changing the position is to click on the board; calling setCustomArrows([]) inside onArrowsChange does nothing. There's probably a workaround, but haven't been able to wrap my head around it. It seems like the arrows drawn on the board are a separate entity from customArrows property of the board component, which can create problems when you want to create an implementation for saving arrow data to some database and displaying them live at the same time. Thanks.

[Epitomaniac]

Minimal example:

const Component = () => {
  const [arrows, setArrows] = useState([]);
  const [game, setGame] = useState(new Chess());

  const clearArrows = () => {
    setArrows([])
  };

  return (
    <div>
      <button onClick={clearArrows }>clear arrows</button>
      <Chessboard
        position={game.fen()}
        areArrowsAllowed={true}
        customArrows={arrows}
      />
    </div>
  );
};

After drawing arrows by hand, setArrows() can't directly manipulate them. This creates issues when you want to add further functionalities to the arrows, like updating their colors by holding shift and redrawing them, etc.