I'm using context api and i'm getting this error and i don't have idea what todo

Question

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {StateProvider} from './StateProvider';
import App from './App';
import reportWebVitals from './reportWebVitals';
import reducer from './reducer';
import { initialState } from './reducer';

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

//reducer.js

export const initialState = {
basket: [],
};

const reducer = (state, action) => {
console.log(action.type);

switch (action.type) {
    case 'ADD_TO_BASKET':
        return {
            ...state,
            basket: [...state.basket, action.item],
        };
    default:
        return state;
}
};
export default reducer;

//StateProvider.js

import React, { createContext, useContext, useReducer } from 'react'
//Prepare the data layer
export const StateContext = createContext;

//Wrap our app and provide the datalayer
export const StateProvider = ({ reducer, initialState, children }) => (
<StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
</StateContext.Provider>
);

//Pull information from Datalayer
export const useStateValue = () => useContext(StateContext);

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of StateProvider.

This is the error i'm getting