Canvas object property is not updating; used useState (Fabricjs with react)

Question

I am using FabricJS with React, and I am able to add objects easily to the canvas but facing problems when trying to manipulate objects' properties, For example, I have recreated my issue in below code:

const {useEffect, useState} = React;


const App = () => {
 const [canvas, setCanvas] = useState('');
  const [draw, setDraw]= useState(true);

  useEffect(() => {
    setCanvas(initCanvas());
  }, []);

  //initialize canvas
  const initCanvas = () => (
    new fabric.Canvas('canvas', {
      height: 600,
      width: 800,
      backgroundColor: 'pink',
      isDrawingMode: draw,
      selection:false,
    })
  )

  //add Rectangle to Canvas
  const addRect = canvas => {
    const rect = new fabric.Rect({
      height: 280,
      width: 200,
      fill: 'yellow',
    });
    canvas.add(rect);
    canvas.renderAll();
  }

  //Toggle Draw on Canvas
  const toggleDraw = () => {
    if(draw){
      setDraw(false)
      return
    }
    if(!draw){
      setDraw(true)
      return
    }

  }

  return(
    <div><center>
      <h1>Editor</h1>
      <button onClick={() => addRect(canvas)}>Rectangle</button>
      <button onClick={toggleDraw}> Toggle Draw </button>
      <br></br>
      <br></br>
      <canvas id="canvas" />
      </center>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));

where I am trying to toggle draw by changing canvas object property isDrawingMode to true and false Please help, Thanks.