SPFX web part to add Text and show it inside a Popup when clicking on a button

I am trying to achieve this using SPFX web part:-

• The web part will render a Button and has a text field inside its settings.

• The user add the Web Part >> edit it >> enter the text inside the text field (inside the setting page) >> save the web part>> then the web part will render a button >> if the user clicks on the button a Popup will be shown with the entered text.

Now i found this link @ https://www.c-sharpcorner.com/article/conecpt-of-react-portal-in-spfx/ which almost achieve what i am looking for, except that the Popup text inside the example is been hard-coded inside the .tsx file.. so what are the steps to make the Popup text configurable inside the web part settings instead of been hard-coded?

Thanks

Here is my ReactPortalWebPart.ts file:-

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import * as strings from 'ReactPortalWebPartStrings';
import ReactPortal from './components/ReactPortal';
import { IReactPortalProps } from './components/IReactPortalProps';

export interface IReactPortalWebPartProps {
  description: string;
}

export default class ReactPortalWebPart extends BaseClientSideWebPart<IReactPortalWebPartProps> {

  public render(): void {
    const element: React.ReactElement<IReactPortalProps> = React.createElement(
      ReactPortal,
      {
        description: this.properties.description
      }
    );

    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

and here is the ReactPortal.tsx:-

import * as React from 'react';  
    import { IReactPortalProps } from './IReactPortalProps';  
    import Myportal from "./Myportal";  
    export default class ReactPortal extends React.Component<IReactPortalProps, {}> {  
      public render(): React.ReactElement<IReactPortalProps> {  
        return (  
          <div >  
          <Myportal/>  
          </div>  
        );  
      }  
    }  

Here is the Myportal.tsx:-

    import* as React from "react";  
    import usePortal from "react-cool-portal";  
    import "./mystyle.scss";  
    const  Myportal = () => {  
     // const { Portal } = usePortal({ containerId: "my-portal-root" });  
      const { Portal, show, hide } = usePortal({ defaultShow: false,containerId:"my-portal-root" });  
      const handleClickBackdrop = (e: React.MouseEvent) => {  
        const { id } = e.target as HTMLDivElement;  
        if (id === "modal") hide();  
      };  
      
      return (  
            <div className="App">  
         
          <button className="btn" onClick={show} type="button">  
            Who we are 
          </button>  
         &nbsp; &nbsp; &nbsp;
          <button className="btn" onClick={show} type="button">  
            Our value 
          </button> 
          <Portal>  
            <div  
              id="modal"  
              className="modal"  
              onClick={handleClickBackdrop}  
              tabIndex={-1}  
            >  
              <div  
                className="modal-dialog"  
                role="dialog"  
                aria-labelledby="modal-label"  
                aria-modal="true"  
              >  
                <div className="modal-header">  
                
                  <button  
                    className="modal-close"  
                    onClick={hide}  
                    type="button"  
                    aria-label="Close"  
                  >  
                    <span aria-hidden="true">×</span>  
                  </button>  
                </div>  
                <div className="modal-body">  
                 <h1> Who we are</h1>
<h3>.................................................</h3>
Our overriding purpose is to dramatically improve the reliability, efficiency........
                </div>  
              </div>  
            </div>  
          </Portal>  
        </div>  
          
      );  
    };  
    export default Myportal;  

from SPFX web part to add Text and show it inside a Popup when clicking on a button