I am doing a personal React.js project. I am having issues with useParams. One of the issues that I am facing is that I cannot find a common id for the useParams. I am not able to show on screen the items that I pass as props in ItemDetails. This is the ItemContainer.:

import { useEffect, useState } from "react";

import ItemDetails from "../Itemdetails";
import { useParams } from "react-router-dom";

const showRace = async (raceId) => {
  const res = await fetch("https://www.betright.com.au/api/racing/todaysracing");
  const json = await res.json().result;
  const race = Object.keys(json).find((findKey) => findKey === String(raceId));

  if (!race) {
    throw new Error("No match found.");
  }
  console.log('race in showRace', race)

  return race;
}

const ItemContainer = () => {
  const [venue, setVenue] = useState({});
  const { raceId } = useParams();

  useEffect(() => {
    showRace(raceId)
      .then((races) => {
        setVenue(races)
      })
      .catch(error => {
        console.error('error useEffect itemContainer', error)
        setVenue({});
      })
  }, [raceId]);
  console.log("venue container", venue);

  return <ItemDetails key={raceId} venue={venue} />;
};

export default ItemContainer;

This is the ItemDetails:

const ItemDetails = ({ venue }) => {
  console.log("venue itemDetails", venue);
  return (
    <>
      {Object.entries(venue).map(([key, value]) => (
        <div key={key}>
          <h1>{key}</h1>
          {value.slice(0, 5).map((i, races) => (
            <div key={i}>
              <p>{races.Venue}</p>
            </div>
          ))}
        </div>
      ))}
    </>
  );
};

export default ItemDetails;

This is a link to a codesandbox with the whole code.