How to use d3 events like drag declaratively with React?

I understand you can do d3 + React declaratively like this:

class Line extends React.Component {

drawLine() {
    let xScale = d3.scaleTime()
        .domain(d3.extent(this.props.data, ({date}) => date));
        .rangeRound([0, this.props.width]);

    let yScale = d3.scaleLinear()
        .domain(d3.extent(this.props.data, ({value}) => value))
        .rangeRound([this.props.height, 0]);

    let line = d3.line()
        .x((d) => xScale(d.date))
        .y((d) => yScale(d.value));

    return (
        <path
            className="line"
            d={line(this.props.data)}
        />
    );
}

render() {
    <svg
       className="line-container"
       width={this.props.width}
       height={this.props.height}
    >
       {this.drawLine()}
    </svg>
}
}

However, if I were to implement drag and click it seems like I gotta to call it in the JSX like <svg onDrag={this.onDrag} onClick={this.onClick}/> because I have to listen to the drag event from React, am I misunderstanding something, or is there some way to get around this? Making my own onDrag detector or using another library seems to be unnecessary work.

I understand that I can just write everything like:

class blah {

componentDidMount(){...}
componentDidUpdate(){d3.on('drag').call('drag', dragged}
dragged(){...}
}

Sorry if the syntax is off. But in this approach, events are detected in d3 so I can use d3.behavior.drag() etc. Anyways, doing react + d3 with the first approach just appeared a bunch cleaner to me, letting d3 do the math and react do the rendering, so is there someway to integrate d3.behavior.drag() in the first approach?