type not matching typescript react-CodePudding

I am trying to send this props to a child component from parent:

{
    "days": 7,
    "hours": 20,
    "minutes": 51,
    "seconds": 7
}

the parent component calling the child looks like this:

const FunctionSolvingTime=()=>{
//returns always object as above
return 
{
    "days": 7,
    "hours": 20,
    "minutes": 51,
    "seconds": 7
}
}

const ParentComponent=()=>{
const [timeLeft, setTime]=useState(FunctionSolvingTime())



//some logic here

return(
<childComponent timeLeft={timeLeft}/>
)

the child component consuming the time object is:


type TTimeLeft = {
  days: number;
  hours: number;
  minutes: number;
  seconds: number;
};


const childComponent = (timeLeft: TTimeLeft) => {

//consume the data here
//{timeLeft.days},{timeLeft.hours}...
}

the error I am getting looks like


Type '{ timeLeft: { days: number; hours: number; minutes: number; seconds: number; }; }' is not assignable to type 'IntrinsicAttributes & TTimeLeft'.
  Property 'timeLeft' does not exist on type 'IntrinsicAttributes & TTimeLeft'.

any idea what am I doing wrongly here?

thanks

CodePudding user response：

Props are passed as object

const childComponent = ({ timeLeft }: { timeLeft: TTimeLeft }) => {

//consume the data here
//{timeLeft.days},{timeLeft.hours}...
}