Can't I call "createRoot" or "ReactDOM.render" in the component?

Question

I want to find a dome element made by an external library (ex: react-calendar..) and want to attach my component as child of the element. So, I made React node with React.createElement and updated the the react dome manually, but I got the following message.

react_devtools_backend.js:3973 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17

So I used "ReactDOM.createRoot()" instead of "ReactDOM.render",but got another error.

You are calling ReactDOM.createRoot() on a container that was previously passed to ReactDOM.render(). This is not supported.

The component was added to the dom element as I inteded, but I got an error like that... should I find another method?

this is my code

parentElement.current = document.getElementsByClassName("test-parent-className")[0] as HTMLDivElement;

if (myElement.current) {
  const parentRoot = ReactDOM.createRoot(parentElement.current as HTMLDivElement);
  parentRoot.render(React.createElement("div", {className: "test-child"},
        <div>test child component</div>))
}
...