Error: Objects are not Valid as a React Child (found: Object) If you Meant to render a Collection of Children, use an array Instead. nextjs/typescript

Question

I have the following problem with nextjs/typescript I have a cart context where is giving the second message, I tried to change the types already tried to do several things but the error persists, someone could give me a light.

<p>Error: Objects are not valid as a React child (found: object with keys {item, totalAmount, totalItem, removeItem, clearCart, increment, decrement}). If you meant to render a collection of children, use an array instead.</o>

import React, { createContext, useReducer, useEffect } from 'react'
import { products } from '../Utils/products'
import { reducer } from '../Utils/reducerCart'

type ProductType = {
  id: number
  title: string
  description: string
  price: number
  img: string
  quantity: number
}
type CartContextType = {
  item: Array<ProductType>
  totalAmount: number
  totalItem: number
  removeItem: (id: number) => void
  clearCart: () => void
  increment: (id: number) => void
  decrement: (id: number) => void
}

export const CartContext = createContext({} as CartContextType)
const initialState = {
  item: products,
  totalAmount: 0,
  totalItem: 0
}
export function CartProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState)
  const removeItem = id => {
    return dispatch({
      type: 'REMOVE_ITEM',
      payload: id
    })
  }
  // clear the cart
  const clearCart = () => {
    return dispatch({ type: 'CLEAR_CART' })
  }
  const increment = id => {
    return dispatch({
      type: 'INCREMENT',
      payload: id
    })
  }
  const decrement = id => {
    return dispatch({
      type: 'DECREMENT',
      payload: id
    })
  }
  useEffect(() => {
    dispatch({ type: 'GET_TOTAL' })
  }, [state.item])
  return (
    <CartContext.Provider
      value={{ ...state, removeItem, clearCart, increment, decrement }}
    >
      {children}
    </CartContext.Provider>
  )
}

Reducercart.ts

type ProductType = {
  id: number
  title: string
  description: string
  price: number
  img: string
  quantity: number
}

type StateType = {
  item: Array<ProductType>
  totalAmount: number
  totalItem: number
}

type ActionType = {
  type?: string
  payload?: any
}

export const reducer = (state: StateType, action: ActionType) => {
  if (action.type === 'REMOVE_ITEM') {
    return {
      ...state,
      item: state.item.filter(curElem => {
        return curElem.id !== action.payload
      })
    }
  }

  if (action.type === 'CLEAR_CART') {
    return { ...state, item: [] }
  }

  if (action.type === 'INCREMENT') {
    const updatedCart = state.item.map(curElem => {
      if (curElem.id === action.payload) {
        return { ...curElem, quantity: curElem.quantity + 1 }
      }
      return curElem
    })

    return { ...state, item: updatedCart }
  }

  if (action.type === 'DECREMENT') {
    const updatedCart = state.item
      .map(curElem => {
        if (curElem.id === action.payload) {
          return { ...curElem, quantity: curElem.quantity - 1 }
        }
        return curElem
      })
      .filter(curElem => curElem.quantity !== 0)
    return { ...state, item: updatedCart }
  }

  if (action.type === 'GET_TOTAL') {
    const { totalItem, totalAmount } = state.item.reduce(
      (accum, curVal) => {
        let { price, quantity } = curVal

        let updatedTotalAmount = price * quantity
        accum.totalAmount += updatedTotalAmount

        accum.totalItem += quantity
        return accum
      },
      {
        totalItem: 0,
        totalAmount: 0
      }
    )
    return { ...state, totalItem, totalAmount }
  }
  return state
}

Products.ts

export const products = [
  {
    id: 1,
    title: 'Samsung S21',
    description: 'black in color',
    price: 25.0,
    img: 'https://images.pexels.com/photos/404280/pexels-photo-404280.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    quantity: 1
  },
  {
    id: 2,
    title: 'Samsung M21',
    description: 'white in color',
    price: 23.0,
    img: 'https://images.pexels.com/photos/47261/pexels-photo-47261.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    quantity: 1
  },
  {
    id: 3,
    title: 'Redmi 9',
    description: 'black in color',
    price: 35.0,
    img: 'https://images-na.ssl-images-amazon.com/images/I/71A9Vo1BatL._SL1500_.jpg',
    quantity: 1
  },
  {
    id: 4,
    title: 'Iphone 12',
    description: 'Best mobile ever',
    price: 90.5,
    img: 'https://images-na.ssl-images-amazon.com/images/I/71hIfcIPyxS._SL1500_.jpg',
    quantity: 1
  },
  {
    id: 5,
    title: 'Samsung S21',
    description: 'black in color',
    price: 25.0,
    img: 'https://images.pexels.com/photos/404280/pexels-photo-404280.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    quantity: 1
  },
  {
    id: 6,
    title: 'Redmi 9',
    description: 'black in color',
    price: 35.0,
    img: 'https://images-na.ssl-images-amazon.com/images/I/71A9Vo1BatL._SL1500_.jpg',
    quantity: 1
  },
  {
    id: 7,
    title: 'Samsung S21',
    description: 'black in color',
    price: 25.0,
    img: 'https://images.pexels.com/photos/404280/pexels-photo-404280.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    quantity: 1
  },
  {
    id: 8,
    title: 'Iphone 12',
    description: 'Best mobile ever',
    price: 90.5,
    img: 'https://images-na.ssl-images-amazon.com/images/I/71hIfcIPyxS._SL1500_.jpg',
    quantity: 1
  },
  {
    id: 9,
    title: 'Samsung S21',
    description: 'black in color',
    price: 25.0,
    img: 'https://images.pexels.com/photos/404280/pexels-photo-404280.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    quantity: 1
  }
]