Send nested collections to React Inertia

Hi I have a Menu controller that return a detail menu page that have dishes and every dish have a category. In this way I send the menu with dishes but how could I access to the dish category?

    public function singleMenuPage(Request $request)
    {
        $menu = Menu::with('dishes')->where('name', unslug($request->route('menuName')))->get();
        return Inertia::render('MenuPage', ['menu' => $menu]);
    }

[
    {
        "id": 1,
        "name": "Pasta e patate",
        "dish_category_id": 2,
        "price": "9.20",
        "is_active": 1,
        "created_at": "2022-12-21T13:26:11.000000Z",
        "updated_at": "2022-12-21T13:26:11.000000Z",
        "pivot": {
            "menu_id": 1,
            "dish_id": 1
        }
    },
    {
        "id": 2,
        "name": "Arrosto di vitello",
        "dish_category_id": 3,
        "price": "15.50",
        "is_active": 1,
        "created_at": "2022-12-21T13:26:11.000000Z",
        "updated_at": "2022-12-21T13:26:11.000000Z",
        "pivot": {
            "menu_id": 1,
            "dish_id": 2
        }
    }
]