'Passing setState hook as prop to a component using TypeScript

I am quite new to TypeScript and I can't figure out how to pass the setState hook to my child component.

I declared my State variable expenseState inside App.tsx and I'm trying to pass it along with the SetStateAction setExpenseState.

App.tsx

type ExpensesType = {
    expenseList: Expense[];
    filteredYear?: number;
}

const expenses: Expense[] = [
    { id: 'e01', title: 'Car Insurance', amount: 300.12, date: new Date(2022, 1, 18)},
    { id: 'e02', title: 'Car Insurance 1', amount: 300.12, date: new Date(2022, 1, 18)},
  ]; 

const [expenseState, setExpenseState] = useState<ExpensesType>({
    expenseList: expenses,
  });

return (
   <Expenses expenseState={expenseState} setExpenseState={setExpenseState} />
);

Expenses.tsx

type ExpensesProps = {
    expenseState: ExpensesType;
    setExpenseState: React.Dispatch<React.SetStateAction<ExpensesType>>;
}

const Expenses = (props: ExpensesProps) => {

    
}

How can I call and use the setExpenseState hook?

Example

props.setExpenseState({
   expenseList: something     
});


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source