how can i use context value in my component

am new to TypeScript, when am trying to use the value i created in my context API but am getting an error Property 'sidebar' does not exist on type 'IStateContext | null'. but it is exist in my IStateContext. what am I doing wrong here

Here's my code

// ./context/contextProvider.tsx

import React, {createContext,useState,useContext,Dispatch,SetStateAction } from "react";
  
  interface IStateContext {
    sidebar: boolean;
    setSidebar: Dispatch<SetStateAction<boolean>>;
    screenSize: number | undefined;
    setScreenSize: Dispatch<SetStateAction<number | undefined>>;
    activeMenu: boolean;
    setActiveMenu: Dispatch<SetStateAction<boolean>>;
  }
   const stateContext = createContext<IStateContext | null>(null);
  
  interface IContextProviderProps {
    children: React.ReactNode;
  }
  export const ContextProvider = ({ children }: IContextProviderProps) => {
    const [sidebar, setSidebar] = useState<boolean>(false);
    const [activeMenu, setActiveMenu] = useState<boolean>(true);
    const [screenSize, setScreenSize] = useState<number | undefined>(undefined);
  
    return (
      <stateContext.Provider value={{sidebar, setSidebar, activeMenu, setActiveMenu, screenSize, setScreenSize }}>
        {children}
      </stateContext.Provider>
    );
  };
  
  export const useStateContext = () => useContext(stateContext); 

// .Sidebar.tsx

import React from 'react'
import { useStateContext } from '../context/contextProvider'

const Sidebar: React.FC = () => {
  const {sidebar, setSidebar, activeMenu, setActiveMenu, screenSize, setScreenSize} = useStateContext()

  return (
    <div className='sidebar'>
     </div>
  )
}

export default Sidebar;