[Solved] HTML Canvas not working with React, code is not giving any error

Roger that Asks: HTML Canvas not working with React, code is not giving any error
Here is the code which I am trying, I am trying to draw brush strokes on mouse move event using react. I am new to react so I saw this particular approach on the internet. Please help me with this. What am I missing?

I have even tried copy-pasting the exact code from a youtube video still it’s not working

Thank You

Code:
import React , { useRef, useEffect, useState } from 'react'
import ReactDOM from 'react-dom';


import './index.css'

function App(){
  const boardRef = useRef(null);
  const [isDrawing, setIsDrawing] = useState(false)
  const contextRef = useRef(null)

  const startDrawing = (e) => {
    contextRef.current.beginPath()
    contextRef.current.moveTo(e.offsetX, e.offsetY);
    
    setIsDrawing(true)
  }

  const finishDrawing = () => {
    contextRef.current.closePath()
    setIsDrawing(false)
  }
   const draw = (event) => {
     
     if (isDrawing) {
      contextRef.current.lineTo(event.offsetX, event.offsetY);
      contextRef.current.stroke();
      
    }
     
   }
    
  
    useEffect(() => {
    const board = boardRef.current
    board.width = window.innerWidth;
    board.height = window.innerHeight;
    const context = board.getContext('2d')
    
    context.scale(2, 2);
    context.lineCap = "round" ;
    context.lineJoin = "round" ; 
    context.lineWidth = 5;
    context.strokeStyle = "black"

    contextRef.current = context
  }, [])
 
    return (
        <canvas id="whiteboard" ref={boardRef}  onMouseDown={startDrawing} onMouseUp={finishDrawing} onMouseMove={draw}></canvas>
    )
}
ReactDOM.render(<App/>,document.getElementById('root'))

Ten-tools.com may not be responsible for the answers or solutions given to any question asked by the users. All Answers or responses are user generated answers and we do not have proof of its validity or correctness. Please vote for the answer that helped you in order to help others find out which is the most helpful answer. Questions labeled as solved may be solved or may not be solved depending on the type of question and the date posted for some posts may be scheduled to be deleted periodically. Do not hesitate to share your response here to help other visitors like you. Thank you, Ten-tools.