Reactjs – React props is not displaying for MenusShow.jsx

I am building a menu-planner app using React as my frontend framework. I built out CRUD actions for recipes, and have an index and show page. There is also an option on each RecipesShow page to add the recipe to a menu. I also have a MenusIndex and MenusShow page built out. Everything’s working properly except the MenusShow page. For some reason, the data from the backend is not displaying on that page, and I’m not sure what the problem is. The backend is working properly with menus.json. I know the frontend is receiving the backend data because the rest of the data is being displayed properly. I know that the HTML for MenusShow.jsx is working because it’s displaying "no data available". When I go to a currentMenu page, the correct menu id shows in the address bar, so I know that the currentMenu function is working. Here is the relevant code in my MenusShow.jsx and Content.jsx files:

MenusShow.jsx

import { useParams } from "react-router-dom";

export function MenusShow(props) {
  const { menuId } = useParams();

  console.log("MenusShow menuId:", menuId);
  console.log("MenusShow props:", props);

  if (!props.menu || !props.menu.event || !props.menu.recipe) {
    console.log("No data available for menuId", menuId);
    //Handle the  case where the data is not available
    return <div>No data available</div>;
  }
  const { event, recipe } = props.menu;

  return (
    <div>
      <h3>{event.title}</h3>
      <h3>Recipes:</h3>
      <p>{recipe.title}</p>
    </div>
  );
}

Content.jsx

import axios from "axios";
import { useState, useEffect } from "react";
import { Routes, Route } from "react-router-dom";
import { MenusIndex } from "./MenusIndex";
import { MenusShow } from "./MenusShow";
...

export function Content() {
...
// MenusIndex function
  const handleIndexMenus = () => {
    console.log("handleIndexMenus");
    axios.get("http://localhost:3000/menus.json").then((response) => {
      console.log(response.data);
      setMenus(response.data);
    });
  };
  useEffect(handleIndexMenus, []);

  // MenusShow function
  const [menus, setMenus] = useState([]);
  // const [isMenusShowVisible, setIsMenusShowVisible] = useState(false);
  const [currentMenu, setCurrentMenu] = useState({});

  const handleShowMenu = (menu) => {
    console.log("handleShowMenu", menu);
    // setIsMenusShowVisible(true);
    setCurrentMenu(menu);
  };
return (
    <div className="container">
      <Routes>
...
<Route
          path="/menus"
          element={
            <MenusIndex
              menus={menus}
              onShowMenu={handleShowMenu}
            />
          }
        />
        <Route path="/menus/:menuId" element={<MenusShow menu={currentMenu} />} />
      </Routes>
...
    </div>
  );
}

To try and figure out where the problem is occurring, I logged the current menu ID to the console, and the props in MenusShow. The menu ID works, but the props for the backend data doesn’t seem to be showing in MenusShow. There are no errors in the console or terminal.