Plugin using react functional component with createRoot instead of ReactDOM.render

[samsundharjith]

Hi all,
I have created a functional component with replacing ReactDOM.render method in React 17 with createRoot in React 18.
Below is the code of the functional component.
PS - value of listingRef = "listing" and Listing is a react component that displays mlsid
import { createRoot } from "react-dom/client";
import { listingRef } from "./consts";
import Listing from "./ListingComponent";

export default function ListingPlugin(editor, opt = {}) {
const c = opt;
const domc = editor.DomComponents;
const defaultType = domc.getType("default");
const defaultView = defaultType.view;
let root = null;

domc.addType(listingRef, {
model: {
defaults: {
stylable: true,
resizable: true,
editable: true,
draggable: true,
droppable: true,
attributes: {
mlsid: "Default MLSID",
editable: true,
},
traits: [
{
type: "number",
label: "MLS ID",
name: "mlsid",
},
],
},
isComponent(el) {
if (
(el.getAttribute && el.getAttribute("data-gjs-type") == listingRef) ||
(el.attributes && el.attributes["data-gjs-type"] == listingRef)
) {
return {
type: listingRef,
};
}
},
},
view: defaultView.extend({
// Listen to changes of mlsid managed by the traits
init() {
this.listenTo(
this.model,
"change:attributes:mlsid",
this.handleChanges
);
root = createRoot(this.el);
},

  // Called whenever mlsid changes
  handleChanges(e) {
    const mlsid = this.model.attributes.attributes.mlsid;
    root.render(<Listing mlsid={mlsid}></Listing>);
  },

  onRender({ el }) {
    const mlsid = this.model.attributes.attributes.mlsid;
    root.render(<Listing mlsid={mlsid}></Listing>);
  },
}),

});
editor.BlockManager.add(listingRef, {
label: "Listing",
category: "Listing",
attributes: { class: "fa fa-clock-o" },
content: <div class="listing" data-gjs-type="${listingRef}"></div>,
});
}
If anyone find any suggestion or modification to the code please let me know.