An error TypeError: Object(...)()Symbol.iterator.next().value is undefined when try run a react from the after creating a statePovider

import React, {createContext,useReducer,useContext} 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);

App C:/Users/Jokanola/Documents/Web Project/bettersociety/src/App.js:14

11 |
12 | 13 | function App() { error 14 | const [ { user }, dispatch] = useStateValue(); 15 | 16 | return( 17 |

此处显示的包含 App 的文件夹

import React from 'react';
    import './App.css';
    import Header from './Components/Header';
    import Sidebar from './Components/Sidebar';
    import Chat from './Components/Chat';
    import SignIn from './Components/SignIn.js';
    import { BrowserRouter as Router, Switch, Route} from "react-router-dom";
    import {useStateValue} from './Components/stateProvider';
    
        function App() {
        const [ { user }, dispatch] = useStateValue();
        
          return(
            <div className="App">
                <Router>
                    {
                        !user? (
                        <SignIn />
                    ):(
                   <div>
                    <Header />
                       <div className="App_body">
                            <Sidebar /> 
                                <Switch>
                                    <Route path="/room/:roomId">
                                        <Chat />
                                    </Route>            
                                </Switch>
                         </div> 
                    </div>
                    )
                  }
                </Router>
            </div>
        
        
            )
        }
        
        export default App;

这是我使用 StateProvider 封装 app 组件的 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {StateProvider} from './Components/stateProvider';
import reducer, { initialState } from './Components/reducer';

ReactDOM.render(
  <React.StrictMode>
      <StateProvider reducer={reducer} initalState={initialState}>
        <App /> 
      </StateProvider>
  </React.StrictMode>,
  document.getElementById('root')
);