Cannot find namespace React Context TypeScript

Question

import React, { useState, createContext, FC } from "react";
import {
  InitialInputValues,
  InputsInitiaState,
} from "../components/AccountDetails/AccountDetails.type";

export const TestContext = createContext<InputsInitiaState>(InitialInputValues);

const TodoProvider: FC<React.ReactNode> = ({ children }) => {
  const [inputs, setInputs] = useState<InputsInitiaState>(InitialInputValues);
  return <TestContext.Provider value={inputs}>{children}</TestContext.Provider>;
};

I have the follwing problem I have created the context and I am trying to return the children component in order to pass the context ot the app but TypeScript is saying that TestContext cannot find namespace of it. I have researched in alot of places and all are showing the same way of handling with context, can some one take a look and point out what I am missing, thanks in advance. I am gonna share a picture as well of the error

Answer 1

It looks like your file is being parsed as TypeScript instead of "TypeScript React" (i.e. TS with JSX).

That's why it's trying to read your JSX tag as a type.