useContext gives the error Cannot find namespace 'SideNavContext'

I am trying to use useContext hook, my context and provider file looks like this:

import { createContext, useState, ReactNode, useContext } from 'react';

interface SideNavContextType {
  isOpen: boolean;
  toggleSideNav: () => void;
}

export const SideNavContext = createContext<SideNavContextType>({
  isOpen: false,
  toggleSideNav: () => {},
});

export const useSideNav = () => {
  return useContext(SideNavContext);
};

export const SideNavProvider = ({ children }: { children: ReactNode }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleSideNav = () => {
    setIsOpen(!isOpen);
  };

  const value = {
    isOpen,
    toggleSideNav,
  };

  return (
    <SideNavContext.Provider value={value}>{children}</SideNavContext.Provider>
  );
};

I'm getting an error with this line :

 <SideNavContext.Provider value={value}>{children}</SideNavContext.Provider>

the error is Cannot find namespace 'SideNavContext'. I have no clue why this is happening....