I am looking for a specifc value in an array of key value pairs using the .find method:

import { useParams } from "react-router-dom";
const brands = [{ value: "Suzuki Jimny" },
{ value: "Land Cruiser" },
{ value: "BMW" }];

export default function OurBrands() {

    const { data } = useParams();
    const b = brands.find(brand => brand.value === data);

    return (
        <div className="m-8">
            <div className="flex flex-row">
                <div className="w-3/4">
                    <h2>{b.value}</h2>
                    <p>{b.info}</p>
                </div>
                <div className="w-1/4 flex-col">
                    <div className="h-[256px] w-full bg-orange-400"></div>
                    <div className="h-[256px] w-full bg-green-400"></div>
                </div>
            </div>
            <div>
                More information
            </div>
        </div>
    );
}

What am i doing wrong? is it perhaps the

brand.value === data 

or am i using the method incorrectly?