Reactjs ctx.strokeStyle 在 canvas html 5 中不起作用

const {useEffect, useRef, useState} = React;

const WhiteBoard = () => {
  const canvasRef = useRef(null);
  const [isDrawing, setIsDrawing] = useState(false);
  const [context, setContext] = useState(null);
  const [prevX, setPrevX] = useState(0);
  const [prevY, setPrevY] = useState(0);
  const divRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const canvasdiv = divRef.current;
    const canvasheight = canvasdiv.clientHeight;
    const canvaswidth = canvasdiv.clientWidth;
    canvas.width = canvaswidth;
    canvas.height = canvasheight;
    const ctx = canvas.getContext("2d");
    ctx.strokeStyle = "red";
    setContext(ctx);
  }, []);

  const startDrawing = (e) => {
    setIsDrawing(true);
    setPrevX(e.nativeEvent.offsetX);
    setPrevY(e.nativeEvent.offsetY);
  };

  const draw = (e) => {
    if (!isDrawing) return;

    context.beginPath();
    context.moveTo(prevX, prevY);
    context.lineTo(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
    context.stroke();

    setPrevX(e.nativeEvent.offsetX);
    setPrevY(e.nativeEvent.offsetY);
  };

  const stopDrawing = () => {
    setIsDrawing(false);
  };

  return (
    <div ref={divRef} className="w-100">
      <canvas
        ref={canvasRef}
        className="w-100"
        onMouseDown={startDrawing}
        onMouseMove={draw}
        onMouseUp={stopDrawing}
        onMouseOut={stopDrawing}
        style={{ border: "1px solid black" }}
      ></canvas>
    </div>
  );
};

ReactDOM.createRoot(document.querySelector("#app"))
  .render(<WhiteBoard />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

const draw = resize => {
  ctx.reset();
  ctx.strokeStyle = "red";
  ctx.lineWidth = 4;

  if (resize) {
    // destroys styles set above
    canvas.width = 300;
  }

  ctx.moveTo(0, 0);
  ctx.lineTo(150, 100);
  ctx.stroke();
};

canvas {
  border: 1px solid black;
}

<div>
  <button onclick="draw(true)">Draw with resize</button>
  <button onclick="draw()">Draw without resize</button>
</div>
<canvas height="150" width="300"></canvas>