Can not use in react 18

[Awen-hub]

By creating the project with react 18, I encounted the error Cannot read properties of undefined (reading 'sourceEvent') when selecting a range. example

[bumbeishvili]

It looks like error is caused by using wrong d3 version. (v6, v7 will not work)

Here is a same example working when I am including d3 v5

https://stackblitz.com/edit/data-driven-range-slider-react-integration-rnn8gt?file=package.json,index.html

[Awen-hub]

It's really strange because the error exists when I included "d3": "5.15.1" in package.json as you do. Here is the example

[Awen-hub]

It works when I change the code.

function brushed(d) {
      if (d.sourceEvent.type === "brush") return;
      if (attrs.freezeMin) {
        if (d.selection[0] < attrs.startSelection) {
          d.selection[1] = Math.min(d.selection[0], d.selection[1]);
        }
        if (d.selection[0] >= attrs.startSelection) {
          d.selection[1] = Math.max(d.selection[0], d.selection[1]);
        }

        d.selection[0] = 0;
        d3.select(this).call(d.target.move, d.selection);
      }

      var d0 = d.selection.map(scaleX.invert);
      const s = d.selection;

      handle.attr("display", null).attr("transform", function (d, i) {
        return (
          "translate(" + (s[i] - 2) + "," + (calc.chartHeight / 2 - 25) + ")"
        );
      });
      output({
        range: d0,
      });
    }

It seems to have no related with react v18. But I don't know why it works on older react version.