I am trying to load photo dynamically using the route param to parse through a list of brands
to fetch the srcimg, but it says that the foundcar is undefined?
I am farily new to React so any criticism is welcome

import { useParams } from "react-router-dom";
import CardCarousel from "@/components/cardcarousel";

const brands = [{ value: "Suzuki Jimny", info: "Suzuki Jimny", srcimg: "jimny1.jpg" },
{ value: "Land Cruiser", info: "Toyota", srcimg: "land-cruiser.jpg" },
{ value: "BMW", info: "BMW", srcimg: 'jimny1.jpg' },
{ value: "Suzuki Swift Sport", info: "The Suzuki Swift", srcimg: "swift1.jpg" }]

export default function OurBrands() {

    const { brand } = useParams();
    console.log(brand, brands);
    const foundcar = brands.find(car => car.value === brand);

    return (
        <div className="bg-gray-300">
            <div className="h-[450px] w-full flex flex-col justify-center items-center">
                <img
                    src={`../assets/images/${foundcar.srcimg}`}
                    alt="Background Image"
                    className="object-cover h-full w-full"
                />
            </div>
            <div className="flex flex-row p-8 z-40">
                <div className="w-3/4 flex flex-col align-center">
                    <h2 className="text-2xl py-8">{foundcar ? foundcar.value : "Brand Not Found"}</h2>
                    <p className="px-28 text-center text-xl">{foundcar ? foundcar.info : "You trippin dog? aint no car here"}</p>
                </div>
                <div className="w-1/4 flex">
                    <div className="h-auto w-auto flex flex-col justify-center">
                        <CardCarousel></CardCarousel>
                    </div>
                </div>
            </div>
        </div>
    );
}

I am unsure what the correct procedure for this is?