How can I create function return object with useContext

I have the AuthConfig file is

import React, { createContext, useState } from "react";
type SetValue = (value: any) => void;
interface AuthContextInterface {
    username: any;
    setUsername: SetValue;
    gmail: any;
    setGmail: SetValue;
}
type Props = {
    children?: React.ReactNode;
};
export const SimpleCtx = React.createContext<AuthContextInterface | null>(null);
const AuthConfig: React.FC<Props> = ({ children }) => {
     const [username, setUsername] = useState(null);
     const [gmail, setGmail] = useState(null);
return (
    <SimpleCtx.Provider value={{ username, setUsername, gmail, setGmail }}>
          {children}
    </SimpleCtx.Provider>
    );
};
export default AuthConfig;

This is a file I want to use useContext

import {AuthConfig} from './AuthConfig'
const {username, setUsername , gmail, setGmail} = useContext(AuthConfig)

export const authConfig = {
   userName: username,
   gmail: gmail
}

I got an error is dispatcher is null.

Shouls I fix this error?