Rendering components based on prop type

I have a small restaurant app which lets users order from a menu. The menu has three types: food, drink, dessert. The component structure from top to bottom is Order -> Menu -> MenuItem. I want to separate the menu page based on type (example: all food items are under a title called FOOD and so on). Right now, the Menu component receives the menu array as a prop from Order and renders MenuItem for each item in the array. Each item has a property called type. I omitted certain parts of the code unrelated to this issue for brevity.

//Order

export default function Order() {
  const [menu, setMenu] = useState<Array<{}>>([]);
  const [total, setTotal] = useState(0);

  useEffect(() => {
    apiFetch("menu").then((json) => setMenu(json.menu));
  }, []);


  async function handleSubmit(e: any) {
    e.preventDefault();
    const selectedItems = getSelectedItems(TotalStore);
    apiFetch("order", "post", { selectedItems })
      .then((json) => {
        alert("Order has been submitted");
        setTotal(0);
        TotalStore.reset();
        localStorage.setItem("last_order_id", json.order.id);

        function checkOrderStatus() {
          apiFetch(
            `order/${json.order.id || localStorage.getItem("last_order_id")}`
          ).then((placedOrder) => {
            const { order } = placedOrder;
            if (order[0].status === 2) {
              alert("Your order is ready!");
            } else {
              setTimeout(checkOrderStatus, 5000);
            }
          });
        }
        checkOrderStatus();
      })
      .catch((error) => {
        alert("Server error");
      });
  }

  function orderPlaced(total: number) {
    return total !== 0 ? true : false;
  }

  return (
    <div>
      {menu.length > 0 ? (
        <>
          <div className="menu">
            <div className="menu-title">Food Menu</div>
            <form id="menu-form" onSubmit={handleSubmit} autoComplete="off">
              <Menu onChange={itemChanged} props={menu} />
              <button type="submit" disabled={!orderPlaced(total)}>
                Place Order
              </button>
            </form>
          </div>
          <div className="order-total">
            <h2>
              Total: $<span>{total.toFixed(2)}</span>
            </h2>
          </div>
        </>
      ) : (
        <>Loading Menu</>
      )}
    </div>
  );
}

//Menu

export default function Menu({ onChange, props }: MenuProps) {
  return (
    <div>
      {props.map((food: any, index: number) => {
        return (
          <MenuItem
            key={index}
            onChange={onChange}
            type={food.type}
            item={food}
          />
        );
      })}
    </div>
  );
}

//MenuItem

export default function MenuItem({ onChange, item, type }: MenuItemProps) {

  return (
    <div>
      <article className="menu-item" data-item-type={type}>
        <h3 className="item-name">{item.name}</h3>
        <input
          type="number"
          className="menu-item-count"
          min="0"
          value={data.count}
          onChange={menuItemCountChange}
        />
        <strong className="item-price">${item.price.toFixed(2)}</strong>
      </article>
    </div>
  );
}

Here is what the page currently looks like:

Read more here: https://stackoverflow.com/questions/66998780/rendering-components-based-on-prop-type