在带有 TypeScript 的 React 中使用 axios 时，是什么导致上下文类型错误以及如何修复它

我想用Typescript 写上下文.因此，这里的API是通过axios绘制的，并用卡片写到屏幕上.但它给出了一个关于上下文类型的错误，我如何消除它？

我的错误是:类型‘{Data:ProductList|未定义；setData:React.Dispatch&lt；React.SetStateAction&lt；ProductList|未定义&gt；&gt；；}’不可分配给类型‘ProductType[]’. 对象文本只能指定已知的属性，并且‘ProductType[]’类型中不存在‘Data’.

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>
    )
}

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