React app wrapped In a Web Component

programming web dev
1

I want to bring in a discussion about Web Components and how important they are this year. Will therefor start by asking the following question:
I would like to be able to wrap a React App into a web component / Module. Is that possible? or do you have to rewrite the react app as a web component? How can you wrap an already written React app into a lit-element / Web Component that you can use and import somewhere else?

I have checked the following code for adding React components into a Web component but not React Apps as a one Web component:

class XSearch extends HTMLElement {
connectedCallback() {
 const mountPoint = document.createElement('span');
 this.attachShadow({ mode: 'open' }).appendChild(mountPoint);

  const name = this.getAttribute('name');
  const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
  ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
 }
}
customElements.define('x-search', XSearch);