How to properly display the object value to another separate page component after a button is clicked in React? (From object form to proper form)

I have created a functionality for my "menu item buttons" to display their assigned data through an object format into a separate page component called "SidePage" (gained help also here in StackOverflow). What I am not sure is that if this functionality that I have created is a formal or effective one since I am planning to implement a backend functionality into my full main app. The functionality involves useState, onClick, and onSelected.

I used props to hold the resulting data after the "menu item button" is clicked.

(Chicken Button should be clicked first in order to display the menu item buttons)

SidePage source code:

import * as React from "react";
import { Typography } from "@mui/material";

export default function SidePage(props) {
  return (
    <div>
      <Typography sx={{ mt: 20 }}>Menu Item Details:</Typography>

      <div>{props.menuItemDetails}</div>
    </div>
  );
}

HomeOrderPage (main page) source code:

import * as React from "react";
import { useState } from "react";

import { Stack } from "@mui/material";
import ButtonCategoryStyle from "./ButtonCategoryStyle";

import ChickenButtons from "./categoryButtons/ChickenButtons";
import SidePage from "./SidePage";
const categories = ["Chicken"];

export default function HomeOrderPage() {
  const [myCategory, setMyCategory] = useState("");
  const [food, setFood] = useState(null);

  return (
    <div>
      <Stack spacing={0} direction="row">
        {categories.map((category) => (
          <ButtonCategoryStyle
            title={category.toLocaleUpperCase()}
            key={category}
            onClick={() => setMyCategory(category)}
          />
        ))}
      </Stack>

      <div>
        <p>
          {myCategory === "Chicken" && <ChickenButtons onSelected={setFood} />}
        </p>

  {/* ------------------------------------------------------------------------------------------------ */}
      </div>
      {/* Displays object after menu item is clicked and renders the side page to show the menu item details:: */}

      <div
        style={{
          backgroundColor: "blue"
        }}
      >
        <SidePage
          menuItemDetails={
            food && <pre sx={{ ml: 120 }}>{JSON.stringify(food, null, 2)}</pre>
          }
        />
      </div>
    </div>
  );
}

Full source code (CodeSandbox): https://codesandbox.io/s/nice-stack-question-page-component-data-transfer-ejebxz?file=/src/HomeOrderPage.jsx

What I also want is to store the property values of the object into variables (in order to display the details of the selected menu item button properly but I am not sure how to do this since I am baffled with using this.state or still using props for this.

Hoping for all of your response as this would help me a lot with my first big React project that I am working on. Thank you very much everyone!