Where does useState store it's value

I'm new to react, but I didn't find an answer to my question on the web, I believe I misunderstand a plenty of things.

Take a look at this code

function App() {
  const classes = useStyles()
  const [menuOpen, setMenuOpen] = useState(false)

  return (
    <ThemeProvider theme={main}>
      <Router>
        <CssBaseline />
        <TopBar onMenuButton={() => setMenuOpen(!menuOpen)} />
        <AppMenu open={menuOpen} />
        <main className={classes.content}>
          <div className={classes.toolbar} />
          <Grid container justify="center" spacing={2}>
            <Grid item xs={menuOpen ? 10 : 12}>
              <Routes />
            </Grid>
          </Grid>
        </main>
      </Router>
    </ThemeProvider>
  )
}

export default App

At the top we call useState hook and it return two values: a variable and a function which updates a variable. When setMenuOpen gets called the component is re-rendered. When a component is re-rendered the whole App function is called one more time and useState at the very top is called one more time.

The question is: how does useState knows about that new value being passed to setMenuItem function when we get to this place second time? So now, menuOpen is equal to what we passed as an argument to setMenuItem function.

const [menuOpen, setMenuOpen] = useState(false)

I believe it stores it in some kind of registry or a global variable between different renders of component.
Thanks in advance.