Как использовать React Context с хуком useState для совместного использования состояния из разных компонентов?

Вам нужно иметь провайдера, который обертывает ваше приложение, прежде чем вы попытаетесь получить доступ к значениям контекста. Чтобы иметь глобального и единого провайдера, вам нужно экспортировать экземпляр wrapRootElement из файла gatsby-browser.js. Это будет выглядеть как

MenuContext.js

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

export const MenuContext = createContext()

export const MenuProvider = ({ children }) => {
  const [active, setActive] = useState(true);
  return (
    <MenuContext.Provider value = {{active,setActive}}>
      {children}
    </MenuContext.Provider>
  );
};

gatsby-browser.js

import React, { useState } from 'react';
import MenuContext from './src/context/MenuContext';
const wrapRootElement = ({ element }) => {
  return (
      <MenuProvider>
        {element}
      </MenuProvider>
  );
};
export { wrapRootElement }

Теперь вы можете использовать его внутри Layout как

import React, { useContext } from "react"
import { Menu } from "../components/menu"
import { MenuContext } from '../menuContext';
const Layout = ({ children }) => {

  const {active} = useContext(MenuContext)

  return (
    <>
      <h1 style = {{color:`#fff`}}>{(active) ? `Menu Opened` : `Menu Closed`}</h1>
      <main>{children}</main>
      <Menu />
    </>
  )
}

export default Layout

и в течение Menu у вас будет

import React, { useContext } from "react"
import  { MenuContext } from '../context/MenuContext';

const Menu = (props) => {
  const {active, setActive} = useContext(MenuContext)
  const clickHandler = () => {
    setActive(!active);
  }
  return(
    <div className = {(active ? `open` : `close`)} onClick = {clickHandler}></div>
  )
}

export { Menu }

Примечание. Вам необходимо создать и экспортировать контекст из отдельного файла, чтобы избежать циклической зависимости.

Однако то, чего вы хотите достичь, можно сделать без использования контекста, если вы просто взаимодействуете между макетом и меню, поднимая состояние до компонента макета.

Menu.js

import React from "react"

const Menu = ({clickHandler, active}) => {
  return(
    <div className = {(active ? `open` : `close`)} onClick = {clickHandler}></div>
  )
}

export { Menu }

Layout.js

import React, {useState} from "react"
import { Menu } from "../components/menu"

const Layout = ({ children }) => {

  const [active, setActive] = useState(1)
  const clickHandler = () => {
    setActive(!active);
  }

  return (
    <>
      <h1 style = {{color:`#fff`}}>{(menuActive) ? `Menu Opened` : `Menu Closed`}</h1>
      <main>{children}</main>
      <Menu clickHandler = {clickHandler} active = {active}/>
    </>
  )
}

export default Layout