Etch-a-Sketch Game - Grid Coloring

I am a beginner in programming and I have started to learn Javascript and React. I'm trying to make an Ech-a-Sketch game in React.

The problem I've encountered is that I don't know how to create functions that will color the grid in black, when I click the Black button or when I click the Random Colors button, to color the grid in random color.

In the Square component, I created the variables randomColor and gridRandomColor and added the event onMouseEnter = {() => {setColor (gridBlack), so I can color the grid in black or random color, depending on the variable I use with setColor.

I also don't know how to make a clearGrid function, with which I can set all the fields in the grid to white.

This is my code so far..

CodeSandbox

Board Component:

import React from "react";
import { useState } from "react";
import Buttons from "./Buttons";
import Grid from "./Grid";

function Board() {
  const [gridSize, setGridSize] = useState(16);

  const handleClick = () => {
    let newGridSize = prompt("Enter a number in range from 16 to 100!");

    if (newGridSize !== null) {
      newGridSize = parseInt(newGridSize);
      if (newGridSize < 16 || newGridSize > 100 || Number.isNaN(newGridSize)) {
        alert("Error!!! Enter a number in range from 16 to 100!");
      } else {
        setGridSize(newGridSize);
      }
    }
  };

  const paintBlack = () => {};

  const paintColor = () => {};

  const clearGrid = () => {};

  return (
    <div className="wrapper">
      <Buttons
        paintBlack={paintBlack}
        paintColor={paintColor}
        clearGrid={clearGrid}
      />
      <div className="container">
        <Grid
          gridSize={gridSize}
          handleClick={handleClick}
          paintBlack={paintBlack}
          paintColor={paintColor}
        />
      </div>
    </div>
  );
}

export default Board;

Grid Component

import { useEffect, useRef } from "react";
import Square from "./Square";

function Grid({
  gridSize,
  setGridSize,
  handleClick,
  paintBlack,
  paintColor,
  clearGrid
}) {
  const boardRef = useRef(null);

  useEffect(() => {
    boardRef.current.style.setProperty("--grid-size", gridSize);
  }, [gridSize]);

  const createSquares = () => {
    let div = [];
    for (let i = 0; i < gridSize * gridSize; i++) {
      div.push(<Square key={i} />);
    }
    return div;
  };

  return (
    <div className="wrapper">
      <div className="container">
        <div ref={boardRef} className="board">
          {createSquares()}
        </div>
      </div>
    </div>
  );
}

export default Grid;

Buttons Component:

function Buttons({ handleClick, paintBlack, paintColor, clearGrid }) {
  return (
    <div className="buttons">
      <button id="button" onClick={handleClick}>
        Reset Board
      </button>
      <button id="button" onClick={paintBlack}>
        Black
      </button>
      <button id="button" onClick={paintColor}>
        Random Color
      </button>
      <button id="button" onClick={() => clearGrid}>
        Clear Board
      </button>
    </div>
  );
}

export default Buttons;

Square Component:

import { useState } from "react";

function Square() {
  const [color, setColor] = useState();

  const style = { backgroundColor: color };

  const randomR = Math.floor(Math.random() * 256);
  const randomG = Math.floor(Math.random() * 256);
  const randomB = Math.floor(Math.random() * 256);

  let randomColor = `rgb(${randomR}, ${randomG}, ${randomB})`;
  let gridBlack = `rgb(${0}, ${0}, ${0})`;

  return (
    <div
      className="square"
      style={style}
      onMouseEnter={() => {
        setColor(randomColor);
      }}
    ></div>
  );
}

export default Square;