Create a React header with multiple places to open and close the menu that can be split apart

header.js

import React, { useState, useContext, createContext } from "react"

const ThemeContext = createContext(null);

function Menu() {
  const { menu, toggleMenu } = useContext(
    ThemeContext
  );

  if (menu === 'open') {
    return (
      <>
        <button onClick={toggleMenu}>Change Menu</button>
        <p>
          The menu is <em>{menu}</em>
        </p>
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
        </ul>
      </>
    );
  } else {
    return (
      <button onClick={toggleMenu}>Change Menu</button>
    );
  }
}

function Otherchanger() {
  const { toggleMenu } = useContext(ThemeContext);

  return (
    <div>
      <button onClick={toggleMenu}>Change Menu</button>
    </div>
  );
}

function Header() {
  const [menu, setmenu] = useState("closed");

  function toggleMenu() {
    setmenu(menu => (menu === "closed" ? "open" : "closed"));
  }

  return (
    <ThemeContext.Provider
      value={{ menu, toggleMenu }}
    >
      <Menu />

      <h2>I can put all the other things here</h2>

      <Otherchanger />
    </ThemeContext.Provider>
  );
}

export default Header;