TypeError: Cannot read property 'user' of undefined App in REACT

Question

I am trying to create chatting application with firebase and react... i am facing error after adding google auth.

i added google auth. succesfully but when i want to user sign in to main app this error happened

 **TypeError: Cannot read property 'user' of undefined App**
../Desktop/web/chat/chatting-app/src/App.js:11
  

     8 | 
       9 | 
      10 | function App() {
    > 11 |   const [{user}, dispatch] = useStateValue();
      12 |   return (
      13 |     <div className="app">
      14 |        {! user ? (

this is full code...

    import React from 'react';
import './App.css';
import Sidebar from './Sidebar';
import Chat from './Chat'
import Login from './Login'
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import { useStateValue } from './StateProvider';


function App() {
  const [{user}, dispatch] = useStateValue();
  return (
    <div className="app">
       {! user ? (
          <Login />
        ) : (
      <div className="app__body">
 <Router>
 <Sidebar />
   <Switch>
    <Route path="/rooms/:roomId">
    <Chat />
    </Route>
    <Route path="/">
    <Chat />
    </Route>
  </Switch>   
 </Router>
      </div>
      )}
    </div>
  );
}

export default App;

Here is useStateValue();

import React, {createContext , useContext, useReducer} from "react"

export const StateContext = createContext();

export const StateProvider = ({ reducer, intialState, children}) => (
    <StateContext.Provider value= {useReducer (reducer, intialState)}>
        {children}
    </StateContext.Provider>
);

export const useStateValue =  () => useContext (StateContext);