Not able to access angular element inside React app

import { inject, Injector, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  entryComponents: [AppComponent],
})
export class AppModule {
  constructor(private _injector: Injector) {
    const element = createCustomElement(AppComponent, {
      injector: this._injector,
    });
    customElements.define('NewsWidget', element);
  }

  ngDoBootstrap() {}
}

  <script src="../../../../Angular/news-custom-element/news-dist/news-custom-element.js"></script>

import './App.css';
import UploadButton from './Component/UploadButton';
import { GlobalContextProvider } from './Context/globalContext';
import MessageComponent from './Shared/Alert';
import '../../../../Angular/news-custom-element/news-dist/news-custom-element';

function App() {

  return (
    <GlobalContextProvider>
      <NewsWidget></NewsWidget>
      <UploadButton />
      <MessageComponent />
    </GlobalContextProvider>
  );
}

export default App;