fabricjs: how to use loadSVGFromURL with react useEffect?

I tried to render a SVG onto my canvas using useEffect, like this:

// store canvas reference
const [canvas, setCanvas] = useState<fabric.Canvas>();
    useEffect(() => {
        const c = new fabric.Canvas("canvas", {
          height: 700,
          width: 700,
          backgroundColor: "white",
        });
        setCanvas(c);
        c.renderAll();
        return () => {
          c.dispose();
        };
      }, []);

    useEffect(() => {
      fabric.loadSVGFromURL('/example.svg', (objects, options) => {
        const svg = fabric.util.groupSVGElements(objects, options);
        // Add the SVG to the canvas and render
        canvas?.add(svg);
        canvas?.renderAll();
      })
    // wait for canvas to mount first
    }, [canvas]);

However there is nothing being rendered on the canvas, I found no similar projects online and don’t know the correct practice in loading SVG with react. What am I doing wrong?