I'm having trouble building a button on my restaurant website using React.js and it's not displaying the overlay page correctly. They are set in their own component (MenuButtons.jsx) and located at the bottom of the shorter menu section of the previous page (see image below). I wish they would launch separate overlay pages for the rest of the menu (e.g. wine list, lunch menu, etc.) since the full menu is too long to fit all on the front page. The image below shows what a wine list overlay page would look like.

The following is the code:

import React, { useState } from "react";
   import WinesOverlay from 
   "../../components/WinesOverlay/WinesOverlay";

const MenuButtons = () => {
  const [overlay, setOverlay] = useState(null);
  const renderOverlay = (value) => {
    if (!value) {
      return;
    } else if (value === "wines") {
      return (
        <div className="app__specialMenu-smallscreen">
          <WinesOverlay />
        </div>
      );
    }
  };

  return (
    <div className="app__specialMenu-buttons">
      <button
        onClick={(renderOverlay) => setOverlay("wines")}
        type="button"
        className="custom__button"
      >
        WINES
      </button>

      <button type="button" className="custom__button">
        SPIRITS & LIQUEURS
      </button>

      <button type="button" className="custom__button">
        LUNCH MENU
      </button>

      <button type="button" className="custom__button">
        DINNER MENU
      </button>

      <button type="button" className="custom__button">
        SOFT DRINKS
      </button>

      <button type="button" className="custom__button">
        BEVERAGES
      </button>
    </div>
  );
};

export default MenuButtons;

Menu section on the front page of the restaurant website

Restaurant website wine list overlay page

I tried reusing some code from the navigation bar section (which launches a single overlay page from the hamburger menu at the top of the previous page) to import the wine list as a component (see first screenshot below). This works for the first button (wine), but when I try to copy the code to the second button (spirits and liqueurs), both the wine and spirits/liqueurs button overlays show spirits and liqueurs The content of the component.

Menu Button Code-Error

Someone suggested that I rewrite the MenuButtons.jsx code as follows (see the second screenshot below): 1: Declare the state at the top of the component (line 5): const [overlay, setOverlay] = useState(null); 2: Create a component that receives the string "wines" as an attribute and renders the WinesOverlay component based on the string set in the state (lines 6-14). 3: Set "label" to the onClick handler of "wines" (line 21).

Not sure if I wrote the code in MenuButtons.jsx correctly, or in the correct order. But the wine button doesn't work, so I don't know if the rewritten code is closer to the desired effect.

If I can get the first button to work, the others should be relatively simple. Any advice is greatly appreciated.

Menu Button Code-Current