reactjs - エラー「状態」の取得は、コンテキスト API 反応を使用して stateprovider と reducer で定義されていません。これが私のコードです

Question

index.js ファイル - 初期状態とレデューサーを渡した場所

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')
);

状態にはレデューサーの初期値があり、状態プロバイダーは index.js のレデューサーと結合されていますが、状態が未定義のエラーが発生していますが、まだ状態が初期化されていません。任意の助けをいただければ幸いです .......................................................... ...................................

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;

ログイン 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;

状態プロバイダー ................................................................. ...................

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);