TypeScript throwing an error on hook when passed to value of Context.Provider-CodePudding

I am creating a cart context for a Nextjs ecommerce store. When trying to pass the setCart to the value prop of the CartContext.Provider, TypeScript throws an error, Ill attach a screenshot below to the error as well as a screenshot of the code. Thanks!

The code

The error

CodePudding user response：

Change your ICart interface declaration to:

import React from 'react'

interface ICart {
  cart: ICartItem[] | null;
  setCart: React.Dispatch<React.SetStateAction<ICartItem[]>>;
}

CodePudding user response：

you can just change the type of setCart in ICart interface to this:

setCart : React.Dispatch<React.SetStateAction<ICartItem[]>>