Setting isVirtualized=true in react-sortable-tree throws error

Question

While implementing a react-sortable-tree in an app and setting the isVirtualized prop to true in order to enable scrolling to searchFocusOffset the app throws an error.

Related: https://github.com/frontend-collective/react-sortable-tree/issues/450

I am using react 17.0.2

Below is the code:

import React, { Component } from "react";
import SortableTree from "react-sortable-tree";
import "react-sortable-tree/style.css"; // This only needs to be imported once in your app

export default class Tree extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      treeData: [
        { title: "Chicken", children: [{ title: "Egg" }] },
        { title: "Fish", children: [{ title: "fingerline" }] },
      ],
      searchString: ""
    };
  }
 
  render() {
    // Case insensitive search of `node.title`
    const customSearchMethod = ({ node, searchQuery }) =>
      searchQuery &&
      node.title.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1;
      
    return (
      <div style={{ height: 400 }}>
        <input 
          type="search" 
          onChange={event => this.setState({ searchString: event.target.value })}
          className="form-control" 
        />
        <SortableTree
          searchMethod={customSearchMethod}
          searchQuery={this.state.searchString}
          searchFocusOffset={0}
          treeData={this.state.treeData}
          onChange={treeData => this.setState([...treeData])}
          isVirtualized={false}
        />
      </div>
    );
  }
}

Below are the errors:

Uncaught Error: Unable to find node on an unmounted component. at findHostInstanceWithWarning (react-dom.development.js:24281:1) at findDOMNode (react-dom.development.js:24804:1) at ScrollingComponent.componentDidMount (index.js:181:1) at commitLifeCycles (react-dom.development.js:20663:1) at commitLayoutEffects (react-dom.development.js:23426:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1) at commitRootImpl (react-dom.development.js:23151:1) at unstable_runWithPriority (scheduler.development.js:468:1)

Uncaught TypeError: this.clearMonitorSubscription is not a function at ScrollingComponent.componentWillUnmount (index.js:203:1) at callComponentWillUnmountWithTimer (react-dom.development.js:20413:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1) at safelyCallComponentWillUnmount (react-dom.development.js:20420:1) at commitUnmount (react-dom.development.js:20951:1) at commitNestedUnmounts (react-dom.development.js:21004:1) at unmountHostComponents (react-dom.development.js:21290:1) at commitDeletion (react-dom.development.js:21347:1)

The above error occurred in the <Scrolling(List)> component:

at ScrollingComponent (http://localhost:3000/static/js/bundle.js:5653:7)
at div
at AutoSizer (http://localhost:3000/static/js/bundle.js:78781:86)
at div
at ReactSortableTree (http://localhost:3000/static/js/bundle.js:77544:5)
at SortableTreeWithoutDndContext
at http://localhost:3000/static/js/bundle.js:44340:23
at SortableTree
at div
at Tree (http://localhost:3000/static/js/bundle.js:106:5)
at App

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

The above error occurred in the <Scrolling(List)> component:

at ScrollingComponent (http://localhost:3000/static/js/bundle.js:5653:7)
at div
at AutoSizer (http://localhost:3000/static/js/bundle.js:78781:86)
at div
at ReactSortableTree (http://localhost:3000/static/js/bundle.js:77544:5)
at SortableTreeWithoutDndContext
at http://localhost:3000/static/js/bundle.js:44340:23
at SortableTree
at div
at Tree (http://localhost:3000/static/js/bundle.js:106:5)
at App

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.