What causes a context type error when using axios in React with TypeScript and how to fix it?

I want to write context with typescript. So here api is drawn through axios and written to the screen with cards. But it gives an error about the context type, how can I eliminate it?

My Error is : Type '{ data: ProductList | undefined; setData: React.Dispatch<React.SetStateAction<ProductList | undefined>>; }' is not assignable to type 'productType[]'.
Object literal may only specify known properties, and 'data' does not exist in type 'productType[]'.

import axios from "axios";
import { createContext, useEffect, useState } from "react";
interface ContextChildrenProps {
    children: JSX.Element
}

export interface SingleProduct {
    title: string,
    description: string,
    thumbnail: string
}

export interface productType {
    product: SingleProduct
}

export interface ProductList {
    data: productType[]
}

export const GlobalProductsContext = createContext<productType[] | null>({} as productType[])

export const ProductsContextProvider = ({ children }: ContextChildrenProps) => {

    const [data, setData] = useState<ProductList>()

    useEffect(() => {
        axios.get('https://fakestoreapi.com/products')
            .then(res => {
                console.log(res)
                setData(res.data)
            })

    }, [])

    return (
        <GlobalProductsContext.Provider value={{ data, setData }}>
            {children}
        </GlobalProductsContext.Provider>
    )
}

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import React from 'react'
import { productType } from '../context/GlobalData'

const SingleCard = ({ product }: productType) => {
    return (
        <>
            <div className="col-lg-4 p-2" data-aos="flip-left">
                <div className="card" style={{ width: '100%', height: '100%' }}>
                    <img src={product.thumbnail} className="card-img-top" alt="..." />
                    <div className="card-body">
                        <h5 className="card-title">{product.title}</h5>
                        <p className="card-text">{product.description}</p>
                        <a href="#" className="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </>
    )
}

export default SingleCard

<!-- end snippet -->

The TS type of context value is not correct.

Try:

import axios from "axios";
import React, { createContext, useEffect, useState } from "react";

interface ContextChildrenProps {
  children: JSX.Element
}

export interface SingleProduct {
  title: string,
  description: string,
  thumbnail: string
}

type ProductContext = {
  data: SingleProduct[];
  setData: React.Dispatch<React.SetStateAction<SingleProduct[]>>
}

export const GlobalProductsContext = createContext<ProductContext>({ data: [], setData: () => { } })

export const ProductsContextProvider = ({ children }: ContextChildrenProps) => {
  const [data, setData] = useState<SingleProduct[]>([])

  useEffect(() => {
    axios.get('https://fakestoreapi.com/products')
      .then(res => {
        console.log(res)
        setData(res.data)
      })

  }, [])

  return (
    <GlobalProductsContext.Provider value={{ data, setData }}>
      {children}
    </GlobalProductsContext.Provider>
  )
}