Accessing public property front Angular Wrapper inside wrapped React component

I am adding enhancements to an application that was originally developed in AngularJS. It was requested that I write the enhancements in ReactJS, so the new React components are located inside of an Angular wrapper. All of the user data was handled in Angular and I have been able to console log the active user inside the wrapper, but I need to display the username inside of one of the React components and cannot find the right way to access the information.

Angular Wrapper:

import { HttpClient } from '@angular/common/http';
import { AfterViewInit, Component, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { Select } from '@ngxs/store';
import { SessionService } from 'AngularApplication-client';
import { combineLatest, Observable, of } from 'rxjs';
import { catchError, map, shareReplay, startWith } from 'rxjs/operators';
import { UserState } from '../../../auth/state/user.state';
import * as React from 'react';
import {createRoot} from 'react-dom/client';
import MaintainWrapper from './maintain.wrapper';


@Component({
  selector: 'app-maintain',
  template: '<div [id]="pageId"></div>',
  })
export class MaintainPage implements AfterViewInit, OnChanges, OnDestroy, OnInit {

  public developerInfo = environment.developerInfo;
  public developerDebug = environment.developerDebug;
  public developerTemplateDebug = environment.developerTemplateDebug;

  @Select(UserState.isLoggedIn)
  public isLoggedIn$: Observable<boolean>;
  public dataSource$: Observable<Array<StatusTableRow>>;
  public userName$: string;

  public pageId = 'maintainPage';
  
  public ngOnChanges(changes: SimpleChanges){ this.render(); }
  
  public ngAfterViewInit(): void { this.render(); }
  
  public ngOnDestroy(): void { }


  constructor(
    private readonly httpClient: HttpClient,
    private readonly sessionService: SessionService,
  ) 

  public ngOnInit(): void {
    this.dataSource$ = combineLatest([
      this.getApiStatus()
    ]).pipe(
      shareReplay(1)
    );


    // Get the user who is logged on
    this.sessionService.getMySessionUsingGET().subscribe(data => {
      if (this.developerDebug){
        console.log("?Name?: ", data.account.name);
      }
      this.userName$ = data.account.name;
    }, error => {
      console.log(error); 
    });

  }

  private getApiStatus(): Observable<StatusTableRow> {
    return this.httpClient.get('/AngularApplication', { observe: 'response' }).pipe(
      map(response => ({ name: 'API', status: response.status })),
      startWith({ name: 'API', status: 0 })
    );
  }
  
  private render(){
    const root = createRoot(document.getElementById(this.pageId) as HTMLElement);
    root.render( React.createElement(MaintainWrapper) );
  }
}

When I pull up the main page (the wrapper), the console.log("?Name?: ", data.account.name); displays the correct information. I just don't know how to access the information inside the React component which is render inside the wrapper. How do I access the public userName$: string; inside of the React component? Inside the Angular code I have seen it call like this <h1> Hello {{ username$ }}<h1>, but in React that syntax just throws an error.

React Component

import * as React from 'react';
import { SessionService } from 'AngularApplication-client';

function ReactComponent() {


 const User1 = UserState.username;
 const User2 = SessionService;


  console.log('Username: ', User1);
  console.log('Username: ', User2);


return (

 <h1> Hello {User1}<h1>

 );
}

export default ReactComponent;

```