Getting error "state" is undefined in stateprovider and reducer using context API react, here is my code

Question

index.js file- where I have passed initial state and reducer

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import reducer, { initialState } from './components/reducer';
import { StateProvider } from './components/StateProvider';


ReactDOM.hydrate(
  <React.StrictMode>

    <StateProvider initialState={initialState} reducer={reducer}>
   
    <App />

    </StateProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

I'm getting error of state undefined, though state has initial value in reducer, and state provider is combined with reducer in index.js but still state is not getting initialized. Any help would be appreciated ...........................................................................

import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from './components/Header';
import Feed from './components/Feed';
import MessageSender from './components/MessageSender';
import Sidebar from './components/Sidebar';
import SidebarRow from './components/SidebarRow';
import Story from './components/Story';
import StoryReel from './components/StoryReel';
import Widget from './components/Widget';
import Login from './components/Login';
import { useStateValue } from './components/StateProvider';
import {useState} from 'react';
 

function App() {


  const [state, setUser] = useStateValue()
     

  return (

    <div className="app"> 
  {!state.user ? (
         <Login/>

       ):(
       <>
       
       <Header/>
       
       <div className="app__body">
       <SidebarRow/>
       <Sidebar/>
       <Feed/>
       <Widget/>
       </div>
       
          </>      
      )}
    </div>
  );
}


export default App;

Login page.js .........................................................................................

import React from 'react';
import "./Login.css";
// import Button from '@material'

import {firebase} from './GoogleAuth-fbase';
import { actionTypes } from "./reducer"; 
import { useStateValue } from './StateProvider';


function Login(){

    const {state, dispatch} = useStateValue(); 

    const signIn = () =>
    {

        var google_provider = new firebase.auth.GoogleAuthProvider();
        firebase.auth().signInWithPopup(google_provider)
        .then((result) => {

            dispatch({
                type: actionTypes.SET_USER,
                user: result.user,
            })

            // console.log(result);
        })
        .catch((err) => {console.log(err)});
    };

    return(
        <div className="login">

        <div className="login__logo">
        <img src="https://i.pinimg.com/564x/6f/35/0d/6f350d177d15776f7874b5c4d0e68a5b.jpg" alt="logo"/>
        <img src="https://uspto.report/TM/86693240/mark" alt="logo"/>
        </div>
    <button type="submit" onClick={signIn}>
    Sign In
    </button>

        
        </div>
    )
}

export default Login;

**

Reducer.js ......................................................................................

export const initialState = {
    user: null,
};

export const actionTypes = {
    SET_USER: "SET_USER",
};

function reducer(state, action){
console.log(action);
switch(action.type){
    case actionTypes.SET_USER:
        return {
            ...state,
            user:action.user,
        };

        default: 
            return state;
}
};

export default reducer;

state provider ...................................................................

import React, { createContext, useContext, useReducer} from 'react';


export const StateContext = createContext();


export const StateProvider = ({reducer, initialState, children}) => (

    <StateContext.Provider value = {useReducer(reducer, initialState)}>
        {children}
    </StateContext.Provider> 

);

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