How to use a Javascript library which does its own DOM manipulation in React

I am trying to use a JavaScript library in React.
The library does it does dom manipulation. e.g. when I click on a row, it adds dom elements to show the detail content of that row.

So In my React component, I did

export default class MyReactComponent extends React.Component {
  private _ref: React.RefObject<HTMLDivElement>;

  constructor(props) {
    super(props);
    this._ref = React.createRef();
  }

    componentDidMount() {
       const container = this._ref.current;
       var myJSLibrary = new JSLibrary(container);
    } 

    
  render() {
    return (
      <div>
        <div  ref={this._ref}/>
      </div>
    );
  }
}

When I run it, I do see myJSLibrary get display. But when I click it, I see this exception in my Chrome console:

Warning: render(...): It looks like the React-rendered content of this container was removed without using React. This is not supported and will cause errors. Instead, call ReactDOM.unmountComponentAtNode to empty a container.

Can you please tell me what am I missing so that React will let the ‘myJSLibrary’ does it own DOM manipulation.

Thank you.