React Context in Typescript - reactjs

Question

I am creating context to handle authentication in typescript app. I have written this AuthProvider.ts
/*-- Imports --*/
/*-- AuthContextType interface and defaults -- */
const AuthContext = createContext<AuthContextType>(contextDefaults);
export const useAuth = () => {
return useContext(AuthContext);
};
interface AuthProviderProps {
children: ReactNode;
}
const AuthProvider = ({ children }: AuthProviderProps) => {
const [user, setUser] = useState<User | null>(null);
const isLoggedIn = !!user;
const login = (data: User) => {
setUser(data);
};
const logout = () => {
setUser(null);
};
return (
<AuthContextType.Provider value={{ user, isLoggedIn, login, logout }}>
{children}
</AuthContextType.Provider>
);
};
export default AuthProvider;
Then I am wrapping App with this AuthProvider;
/* --- imports ---*/
const App = () => {
return (
<AuthProvider>
<div>App</div>
</AuthProvider>
);
};
export default App;
This code is giving errors and when I write same code in javascript app it is working fine.
AuthContext.ts Errors
App.js Error
Any help will be appreciated.
Thanks

Answer 1

Could it be that you've used: AuthContextType.Provider when you mean AuthContext.Provider?
AuthContextType is a Typescript type, not a react context object.
const AuthProvider = ({ children }: AuthProviderProps) => {
....
return (
<AuthContext.Provider value={{ user, isLoggedIn, login, logout }}>
{children}
</AuthContext.Provider>
);
};
Does this work?