Making a page for each category to show restaurants

I am making a category page for restaurants and I have 2 Json files. One with information about the restaurants and one for the categories.

This is the restaurants.Json file which includes the categories for this restaurant:

{
  "restaurants": [
    {
      "name": "Grill",
      "id": "120dxpx5",
      "slogan": "Best burgers in the town",
      "createdDate": "2019-01-01",
      "openingHours": [
        {
          "days": "Monday - Friday",
          "hours": "09:00 - 17:00"
        },
      ],
      "website": "http://website.lt",
      "categories": ["Burger", "Salads", "Grill"]
    },
    {...},

And this is categories.json with all of the available categories:

    {
  "categories": [
    "Burger",
    "Salads",
    "Grill",
    "Ramen",
    "Sandwich",
    "Kebab",
    "Pizza",
    "Brunch",
    "Pancakes",
    "Sushi",
    "Sweets",
    "Soups",
    "Donuts",
    "Hot dogs"
  ]
}

This is my code Category.js:

import React, { useState, useEffect } from "react";
import RestaurantCard from "components/restaurantCard";
import "./category.scss";

const Category = () => {
  const categoryUrl =
    "categories.json";
  const restaurantsUrl =
    "restaurants.json";

  const [categoryRestaurants, setCategoryRestaurants] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const restaurantsResponse = await fetch(restaurantsUrl);
        const restaurantsJson = await restaurantsResponse.json();
        const restaurants = restaurantsJson.restaurants;

        const categoryResponse = await fetch(categoryUrl);
        const categoryJson = await categoryResponse.json();
        const [categories] = categoryJson.categories;

        const restaurantWithCategory = restaurants.categories;
        const filteredRestaurant = restaurants.filter((categories) =>
          restaurantWithCategory.includes(categories)
        );
        setCategoryRestaurants(filteredRestaurant);
      } catch (error) {}
    };

    fetchData();
  }, []);

  <div className="category">
    <h1 className="h1-font category__header">
      The best place for the "category" !
    </h1>
    {categoryRestaurants.slice(0, 2).map((categories) => {
      return <RestaurantCard key={restaurant.id} restaurant={categories} />;
    })}
  </div>;
};

export default Category;

How could I create a page for each of the categories above and show each restaurant which has the category in it’s json file.