javascript – Adjusting size of to fit parent div while still maintaining draw functionality – help needed

import React, { useRef, useEffect, useState } from 'react';
import './app.css'

function App() {

  const canvasRef = useRef(null)
  const contextRef = useRef(null)
  const divRef = useRef(null)
  const (isDrawing, setIsDrawing) = useState(false)

  useEffect(() => {
    const canvas = canvasRef.current
    canvas.width = divRef.clientWidth * 2;
    canvas.height = divRef.clientHeight * 2;
    canvas.style.width = `${divRef.clientWidth}px`;
    canvas.style.height = `${divRef.clientHeight}px`;

    const context = canvas.getContext("2d")
    context.scale(2,2)
    context.lineCap = "round"
    //this line will provide the color - maybe change that to let users type in a color or click a color
    context.strokeStyle = "black"
    //here the line thickness is defined
    context.lineWidth = 5
    contextRef.current = context
  }, ())

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

  const finishDrawing = () => {
    contextRef.current.closePath()
    setIsDrawing(false)
  }

  const draw = ({nativeEvent}) => {
    if(!isDrawing){
      return
    }
    const {offsetX, offsetY} = nativeEvent;
    contextRef.current.lineTo(offsetX, offsetY)
    contextRef.current.stroke()
  }

  return (
    <div id="canvasDiv" ref={divRef}>
      <canvas
        onMouseDown={startDrawing}
        onMouseUp={finishDrawing}
        onMouseMove={draw}
        ref={canvasRef}
      />
    </div>
  )
}

export default App
#canvasDiv {
    width: 500px;
    height: 500px;
    border-style: solid;
    border-width: 2px;
    border-color: black;
}

#canvasDiv canvas {
    width: 100%;
    height: 100%;
}

Having trouble getting my draw application to work within the confines of the parent div. It does manage to resize the canvas but at the expense of the draw functionality no longer working. The code below is how it looks when it works using the entire view window as the canvas, but I am trying to implement it into a moveable window and need to be able to resize it.

const canvas = canvasRef.current
canvas.width = window.innerWidth * 2;
canvas.height = window.innerHeight * 2;
canvas.style.width = `${window.innerWidth}px`;
canvas.style.height = `${window.innerHeight}px`;