2d array update render with react hooks

Question

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

Problem

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 rerender.

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

EDIT: I found that the green box disappears for a second, 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? but how? Will you help gentlemen?

Here's fuctions for random vector and value fo 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'
      
    }
  };