Cannot find namespace error in typescript context file?

import React, { useState, createContext } from 'react';

type AppStateValue = {
  darktheme: boolean;
};

const defaultSataeValue: AppStateValue = {
  darktheme: false,
};

export const AppStateContext = createContext(defaultSataeValue);

const AppStateProvider: React.FC = () => {
  return <AppStateContext.Provider value={{}}></AppStateContext.Provider>;
};

// Tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}