Typescript and interface arrays undefined and not assignable

I’m having trouble getting the syntax right for the Typescript React Props.
I have an array of people each of which may have 0 – many cars. I have a people container that will contain all people, each person will have a car container that may contain cars, and car components that will be inside the car container.

I need to have the container for cars anyways because I will add edit buttons which will add cars to the person.

I’ll add my code from top down:

PersonSlice:

export interface PersonState {
  id?: number;
  firstname?: string;
  lastname?: string;
  email?: string;
  created_at?: any;
  updated_at?: any;
  cars?: [];
}

People.tsx:

function People() {
  const people = useAppSelector(selectPerson);   //person is of type interface PersonState[]
  let contents;
    contents = <><div className="personcontainer">
      {people && people.length > 0 && people.map(person => {
        return <div key={person.id}>
          <Person
           dispatch={dispatch} 
           person={person}
           toggleEditForm={() => toggleEditForm(person.id)}
           personToEdit={personToEdit}
           submitEdit={submitEdit}
           />
          </div>
      })}
      </div></>
  });
}

This is where I start to have problems –

Person.tsx:

interface PersonProps {
  dispatch: Dispatch<any>;
  person: PersonState;
  toggleEditForm: () => void;
  submitEdit: any;
  personToEdit: number;
}

function Person(props: PersonProps) {
  return (
    <div className="person">
      <Cars cars={props.person.cars}/>  //cars error: type [] | undefined not assignable to car[]
    </div>
  );
}

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.map((carobj: car) => {
                <Car car={carobj} key={}/>   //car error: Type '{ car: car; key: any; }' is not assignable to type 'IntrinsicAttributes & car'.
            })}
            </div>
    )
}
export default Cars;

and finally car.tsx:

export interface car {
    year: number,
    make:string,
    model: string,
    price: number,
    person_id: number,
}
export function Car (props: car) {
    return (
        <div className="carcontainer">
            <h3>
                {props.year} {props.make} {props.model} {props.price}
                </h3>
            </div>
    )
}

So I have two errors, one in person.tsx and one in cars.tsx which I added as comments in the code.

I’ve read like a dozen questions on this but I’m still super confused. What am I doing wrong?

Thanks

>Solution :

The fix to both issues is in cars.tsx.

import {car, Car} from './car';
interface cars {
    cars?: car[]; // make this optional since the data from PeopleState is optional
}
function Cars (props: cars) {
    return (
        <div className="carcontainer">
            <h2>cars container</h2>
            {props.cars && props.cars.map((carobj: car) => {
                <Car {...carobj} key={}/>   // spread carobj into the component
            })}
            </div>
    )
}
export default Cars;