I'm trying to add drag event to my d3 force layout, but for some reason, the event attr isn't defined so nothing happens. I know there were changes in the new doc of d3-drag and I followed these instructions.

heres my code:

    const node = svg
      .selectAll("circle")
      .data(nodes)
      .enter()
      .append("circle")
      .attr("r", 35) // radius field, so width and height 80X80
      .attr("stroke", "lightgray")
      .attr("stroke-width", 0.5)
      .style("fill", "lightgray")
      .call(handler
      .on('start', dragstarted)
      .on('drag', dragged)
      .on('end', dragended)

the event functions:

    const dragstarted = (event: any, d: any) => {
      console.log(' dragged d', d);
      console.log('event', event);

      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      if (!event.active) {
        simulation.alphaTarget(0.3).restart();
      }
      d.fx = d.x;
      d.fy = d.y;
    }

    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    const dragged = (event: any, d: any) => {
      console.log(' dragged d', d);
      console.log('event', event);

      d.fx = event.x;
      d.fy = event.y;
    }

    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    const dragended = (event: any, d: any) => {
      console.log(' dragended  d', d);
      console.log('event', event);

      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      if (event.active) {
        simulation.alphaTarget(0);
      }

      d.fx = null;
      d.fy = null;
    }

the example from the docs :

  d3.drag()
       .on("start", (event, d) => circle.filter(p => p === d).raise().attr("stroke", "black"))
       .on("drag", (event, d) => (d.x = event.x, d.y = event.y))
       .on("end", (event, d) => circle.filter(p => p === d).attr("stroke", null))

and this is what i get :

Uncaught TypeError: Cannot read properties of undefined (reading 'document')
    at nodrag.js:5

I added screenshots for the place its failing to get the event

I don't get what I do wrong here, thanks for the help.

EDIT full example with the code : https://stackblitz.com/edit/react-saqrv9?file=src%2Fgraph.tsx