Sharing variable(s) between files in Reaact.js

Hi I’m trying to share a variable ‘myName’ that will contain username from Login2.js which processes Login.html to App.js(main file)
Here is the code for Login2.js:

import React, { Component } from "react";


// if(document.readyState === 'loading') {
//     document.addEventListener('DOMContentLoaded', afterLoaded);
// } else {
//     //The DOMContentLoaded event has already fired. Just run the code.
//     afterLoaded();
// }
//
// function afterLoaded(){
//Your initialization code goes here. This is from where your code should start
// document.readyState === "complete")
let aa = 'hello';

function authenticate(a){//authentication function
    let c = a//is the user input
    var t1 = false
    var t2 = false
    var b = c.search("[a-z][a-z][0-9][0-9][0-9][0-9][0-9]")

    if(b == 0){
        t1 = true
    }
    if(c.length == 7){
        t2 = true
    }

    return t1&&t2//output true

}




function click(){
    var n = 3;
    window.onload = function(){
        document.getElementById("myButton").onclick = function(){
            var myName = document.getElementById("myText").value;
            if(authenticate(myName)&&n!==0){
                console.log("welcome "+myName)
                let url = "http://localhost:3000/website"
                window.open(url,"_self")
            }

            else if(n === 0){
                alert("no more log-ins")
            }

            else{
                alert("you have "+n+" chances to log-in again")
                n--
            }
        }
    }
}


class Login2 extends Component {
    state = {};
    render() {
        click();
        return (
            <div>
                <label><b>Username:</b></label>
                <input placeholder="Enter Username" id="myText"></input>
                <button type="button" id="myButton"> SIGN IN </button>
            </div>
        )
    }
}
export default Login2;

And here is the code from the App.js file:

// import React from 'react';

import React, { Component } from 'react';
import './App.css';
import Navbar from './components/Navbar.js';
import { BrowserRouter as Router, Routes, Switch, Route } from 'react-router-dom';
import Home from "./components/pages/Home"
import Faq from "./components/pages/faq"
import Advocate from "./components/pages/Advocate"
import CalendarComponent from './components/pages/Calendar.js'
import Login2 from './components/pages/Login2'
import { Linking } from 'react-native'
import { Users } from './components/Backend/Users';
import { ProcessReq } from './components/Backend/ProcessReq';
import c from "./components/pages/Login2";









const Content = () => {

    return <>

        <Navbar></Navbar>

        <Home></Home>

        <Faq></Faq>

        <Advocate></Advocate>

    </>

}


function App() {
    //should load name here and output it to user as a "welcome myName to the app" message

    return (
        //this splits up our page into the main section plus an additional calendar section

        //appropriate pathing is used to get from one part to another

        <div className={"container-fluid homepage-background"}>

            <Router>

                <Routes>

                    {/* <Route path={"/"} element={<Login />} /> */}

                    <Route path="website" element={<Content />} />
                    <Route path="calendar" element={<CalendarComponent />} />
                    <Route path="/" element={<Login2 />} />
                    <Route path="website/accountInfo" element={<Users/>} />





                </Routes>

            </Router>



        </div>

    );

}



export default App;

How do you propose I shul export variables as I have tried module.exports and require but it didn’t work among other methods. Thank you in advance!