I'm trying to create easy bouncing ball game in 2d array with React hooks. I have a problem to solve:

When the ball hits the green field, it should change the vector to random and change its value in the array from "Y" to "0". It changes direction, but the green space does not disappear from the board. It's still back after re-render.

Here's a full code: https://stackblitz.com/edit/react-cvlqsp?file=src/App.js

Edit

I found that the green box disappears, but each time the ball moves, it re-renders and it looks like it permanently. I can't help myself not to render the whole thing every time but only the ball movement. Should I use this in useEffect? and how?

Here's functions for random vector and value of array changes not working:

let random = () => {
    if (Math.random() < 0.5) {
      setVectorX((vectorX *= -1));
    } else {
      setVectorY((vectorY *= -1));
    }
  };

  let checkforYCollsion = () => {
    if (board[positionY][positionX] === 'Y') {
      random();
      board[positionY][positionX] = '0'
      
    }
  };