React Context provider with TypeScript Error

I'm trying to write and context to set an id in local storage . Here's my code

import React, {
  createContext,
  useEffect,
  useMemo,
  useState,
  ReactNode,
} from 'react';

// Interface pour le contexte Transporter
interface TransporterContextProps {
  transporter: string | null;
  setTransporter: React.Dispatch<React.SetStateAction<string | null>>;
}

// Création du contexte avec le type `TransporterContextProps | undefined`
export const TransporterContext = createContext<
  TransporterContextProps | undefined
>(undefined);

interface TransporterProviderProps {
  children: ReactNode;
}

const TransporterProvider: React.FC<TransporterProviderProps> = ({
  children,
}) => {
  const [transporter, setTransporter] = useState<string | null>(
    localStorage.getItem('transporter'),
  );

  useEffect(() => {
    // Met à jour ou supprime le transporteur dans le localStorage
    if (transporter) {
      localStorage.setItem('transporter', transporter);
    } else {
      localStorage.removeItem('transporter');
    }
  }, [transporter]);

  // Définir `contextValue` avec le type explicite `TransporterContextProps`
  const contextValue: TransporterContextProps = useMemo(
    () => ({
      transporter,
      setTransporter,
    }),
    [transporter],
  );

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

export default TransporterProvider;

But I've got this error : The namespace 'TransporterContext' could not be found.ts(2503) namespace error

for this line :

    <TransporterContext.Provider value={contextValue}>
      {children}
    </TransporterContext.Provider>

Due to this error, I cannot import my provider in my App.tsx

Can someone help me pls ??

Tk