I have a Cars component that will have multiple Car components inside. I have some checks to make sure the Car[] is not undefined or null. But Car is not being rendered

console log of carobj is: Object { id: 5, year: 2009, make: "honda", model: "civic", price: 18000, person_id: 1, created_at: "2022-03-12T05:56:18.526Z", updated_at: "2022-03-12T05:56:18.526Z" }

just before I pass the data into the car component

cars.tsx:

import {car, Car} from './car';
interface cars {
    cars?: car[];
}
function Cars (props: cars) {
    return (
        <div className="carcontainer">
            <h2>cars container</h2>
            {props.cars && props.cars?.length > 0 && props.cars!!.map((carobj: car, idx) => {
                console.log(carobj);
                let {year, make, model, price, person_id } = carobj;
                <Car year={year} make={make} model={model} price={price} person_id={person_id} key={idx} />
                // <Car {...carobj} key={idx}/>
            })}
            </div>
    )
}
export default Cars;

and my car.tsx component:

export interface car {
    year: number,
    make:string,
    model: string,
    price: number,
    person_id: number,
}

export function Car (props: car) {
    console.log(props.year);
    return (
        <div className="car">
            <h3>
                car:{props.year} {props.make} {props.model} {props.price}
                </h3>
            </div>
    )
}

the consolelog of props.year inside the Car doesn't show up in the console.

I've tried spreading the props and also explicitly passing the props in.

No errors show up in the reactapp or in the console. What am I doing wrong? Thanks