contexApp.jsx

const UserContext = React.createContext();

const App = () => {
  const username = "John Doe";
  const otherData = {};
  return (
    <UserContext.Provider value={{ username, otherData }}>
      <Header />
    </UserContext.Provider>
  );
};

const Header = () => {
  return <Menu />;
};

const Menu = () => {
  return <User />;
};

const User = () => {
  const { username } = React.useContext(UserContext);
  return <h1>{username}</h1>;
};