как прокинуть пропсы в компонент реакта,чтобы компонент мог прочитать этот объект с помощью мапа

import { v1 } from "uuid";

import { RideList } from "./components/rideList/RideList";
import { useState } from "react";
import { HaulFormType } from "./components/rideForm/RideForm";

type RideListType = {
  id: string;
  title: string;
};

function App() {
  const removeRide = (id: string, rideListId: string) => {
    const rides = ridesObj[rideListId];
    const filteredRides = rides.filter((r) => r.id !== id);
    ridesObj[rideListId] = filteredRides;
    setRides({ ...ridesObj });
  };

  const addRide = (props: HaulFormType, rideListId: string) => {
    const rides = ridesObj[rideListId];
    const Ride = {
      id: v1(),
      date: props.date,
      direction: props.direction,
      cost: props.cost,
      kilometers: props.kilometers,
      l100: props.l100,
      literCost: props.literCost,
      emptyKm: props.emptyKm,
    };
    const newRides = [...rides, Ride];
    ridesObj[rideListId] = newRides;
    setRides({ ...ridesObj });
  };

  const rideListId1 = v1();
  const rideListId2 = v1();

  const [ridesObj, setRides] = useState({
    [rideListId1]: [
      {
        id: v1(),
        date: "21.01.2023",
        direction: "Volgograd - SPb",
        cost: 180000,
        kilometers: 2000,
        l100: 32,
        literCost: 63,
        emptyKm: 50,
      },
      {
        id: v1(),
        date: "11.12.2019",
        direction: "SPb - Msk",
        cost: 50000,
        kilometers: 750,
        l100: 32,
        literCost: 63,
        emptyKm: 50,
      },
    ],
    [rideListId2]: [
      {
        id: v1(),
        date: "21.01.2023",
        direction: "Kazan - SPb",
        cost: 120000,
        kilometers: 1650,
        l100: 32,
        literCost: 63,
        emptyKm: 50,
      },
    ],
  });

  

  const [rideLists, setRideLists] = useState<Array<RideListType>>([
    { id: rideListId1, title: "370" },
    { id: rideListId2, title: "777" },
  ]);

  return (
    <div>
      {rideLists.map((rl) => {
        return (
          <RideList
            key={rl.id}
            id={rl.id}
            title={rl.title}
            rides={rides}   //здесь пишет что не может найти rides
            removeRide={removeRide}
            addRide={addRide}
          />
        );
      })}
    </div>
  );
}

export default App;

import { HaulFormType, RideForm } from "../rideForm/RideForm"

type PropsType = {
  id:string
  title: string;
  rides: Array<RideType>;
  removeRide: (id: string, rideListId: string) => void;
  addRide: (props: HaulFormType, rideListId: string) => void;
};

type RideType = {
  id: string;
  date: string;
  direction: string;
  cost: number;
  kilometers: number;
  l100: number;
  literCost: number;
  emptyKm: number;
};

export function RideList(props: PropsType) {
  return (
    <div>
      <h3>{props.title}</h3>
      <RideForm addHaul={props.addRide}/>
      {props.rides.map((r: RideType) => {
        console.log(props.rides)
        return (
          <div key={r.id} className="rideList">
            <div>{r.date}</div>
            <div>{r.direction}</div>
            <div>{r.cost}</div>
            <div>{r.kilometers}</div>
            <div>{r.l100}</div>
            <div>{r.literCost}</div>
            <div>{r.emptyKm}</div>
            <button onClick={() => props.removeRide(r.id, props.id)}>X</button>
          </div>
        );
      })}
    </div>
  );
}