I am new to React and very amateur with js. I am having an issue with passing state around components. I have a component that is a button in a separate file. When the user clicks it, they get prompted to do some stuff from a 3rd party and I get back some things(information) like an acct number.

I want to pass that acct number back to app.js and then to other components and pages so that I can change behavior based on it. Below is the code for reference:

app.js

function App() {
    const [mmAccount, setMMAccount] = useState('');

    function handleChildClick(mmAccount) {
        setMMAccount(mmAccount)
        console.log('new acct:', mmAccount);
}


  return (
    <Router>
   
    <SpecialButton mmAccount={mmAccount} onAcctChange={handleChildClick}/>

specialbutton.js

function SpecialButton({ mmAccount, onAcctChange }) {
    
    const { activate, deactivate, account } = imported3rdpartystuff()   

    function handleClick(event) {
    onAcctChange(event.target.account)
    console.log("handle click", mmAccount); 
  }

   if (window.somestuff is true) {
    return [  <p> {!account && <LoadingButton
   } />} onClick={(e) => { activate(); handleClick(e)}}> Connect Here</LoadingButton>}
      {account && <Button
      variant="contained" />}
      onClick={deactivate}>Disconnect: {account.substring(0,5)} ... {account.slice(-4)} </Button>}</p>,
    ];}

I feel like event.target.account is not the way to get the value of account into mmAccount and pass back up to app.js. I've tried maybe 5 different variations of functions and constants. Now, trying explicitly to pass account to this event.target syntax,I don't really understand.

If I pass account directly, I get the following error:

function handleClick(event) {
    onAcctChange(account)

and console.log(mmAccount) in either app.js or the button file, I get value as undefined.

Is the update running before mmAccount gets updated or anyone have another idea of where I went wrong?