I cant find my context provider namespace?

Intellisense complains that it can’t find the namespace WorkorderListContext in WorkorderListProvider return, but its in the same file?

import { createContext } from 'react';

interface IWorkorderListContext {
    items: any[];
    setItems?: (itemsArray: []) => void;
    getItems?: () => [];
}

const defaultState = {
    items: []
};

const WorkorderListContext = createContext<IWorkorderListContext>(defaultState);

const WorkorderListProvider = ({ children }: { children: any }) => {
    return (
        <WorkorderListContext.Provider>   **<---- Error: Cannot find namespace ts(2503)**
            {children}
        </WorkorderListContext.Provider>
    )
}

export { WorkorderListProvider, WorkorderListContext };

>Solution :

You should use .tsx as compatible format of the file