React - How to utilize smooth scroll and cursor elements

Question

I'm creating a portfolio in React & Gatsby. I'm trying to achieve a scrolling animation effect similar to the one seen on Nana-Asia.com, in which a custom cursor follows the mouse cursor and expands when hovering over links.

I managed to achieve this with setState and onMouseMove. However I'm running into an issue that happens when I start scrolling. Because of the smooth scrollbar effect I'm using ("react-smooth-scrollbar"), the custom cursor I made lags behind my mouse cursor every time I scroll. The further down the page I scroll, the more the cursor lags behind.

class Cursor extends React.Component {
  constructor(props) {
    super(props)
    this.state = { x: 0, y: 0 }
  }

  _onMouseMove(e) {
    this.setState({ x: e.screenX, y: e.screenY })
  }

  render() {
    const { x, y } = this.state
    return (
      <div className="siteContent" onMouseMove={this._onMouseMove.bind(this)}>
        <StyledCursor style={{ top: x, left: y }} />
        {this.props.children}
      </div>
    )
  }
}

Is there a way for me to force the custom cursor element to "refresh" its position every time I scroll?