title: What to set as the Provider's value using react typescript
body: <p>I'm trying to learn how to use hooks and context in React, but need to work with TypeScript (new to that as well).</p>
  <p>I am confused about what to set provider value on my below code. I have created a hook useFirebase it will return some functions like RegisterUser, SignIn, user(it's a state), logout.</p>
  <p>First I created UseAuth.tsx hook, using this hook I want to import the above functions which I mentioned.</p>
  <pre><code>import { useContext } from 'react';
  import { AuthContext } from '../context/AuthProvider';
  
  const UseAuth = () =&gt; {
      const auth = useContext(AuthContext)
      return auth
  };
  
  export default UseAuth;
  </code></pre>
  <p>Everything is ok but I am getting an error on the provider value. The error is <code>(JSX attribute) React.ProviderProps&lt;null&gt;.value: null Type '{ RegisterUser: RegisterUserFunction; SignIn: SignInUserFunction; user: userState; logout: () =&gt; void; }' is not assignable to type 'null'. The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes &amp; ProviderProps&lt;null&gt;'</code> I have created an interface <strong>IAuth</strong> but where I need to define it I am confused.</p>
  <pre><code>import React, { createContext } from 'react';
  import { UseFirebase } from '../hooks/UseFirebase';
  
  
  export const AuthContext = createContext(null)
  
  export interface IAuth {
      RegisterUser: () =&gt; void;
      SignIn : () =&gt; void;
      user : any
      logout : () =&gt; void;
  
  }
  
  const AuthProvider = ({ children } :any) =&gt; {
      const allContext = UseFirebase()
      return (
          &lt;AuthContext.Provider value={allContext}&gt;
              {children}
          &lt;/AuthContext.Provider&gt;
      );
  };
  
  export default AuthProvider;
  </code></pre>