Fabric.js objects not performing draggable property

I'm implementing fabric for the first time and in an example project , when I create a Rectangle , it's not performing dragging property. I.ve followed https://aprilescobar.medium.com/part-2-fabric-js-on-react-fabric-rect-533c5d8bbe55 tutorial , and The drag happened only once and not performed afterwards Here is my implemented code:

    var [canvas, setCanvas] = useState('');

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


    var initCanvas = () => (
        new fabric.Canvas('c', {
            height: 800,
            width: 800,
            backgroundColor: 'gray'

        })
    );

    var addRect = canvi => {
        var rect = new fabric.Rect({
            height: 70,
            width: 70,
            fill: 'yellow',
            hasControls: true,
        });
        canvi.add(rect);
        canvas.setActiveObject(rect)
        canvi.renderAll();
    }
    
    return (
        <>
            <Button onClick={() => addRect(canvas)}>Rectangle</Button>
            {/* <form onSubmit={e => addImg(e, imgURL, canvas)}>
                <div>
                    <input
                        type="text"
                        value={imgURL}
                        onChange={e => setImgURL(e.target.value)}
                    />
                    <button type="submit">Add Image</button>
                </div>
            </form> */}
            <canvas id='c' />
        </>
    )
}```