Fixing ‘reducer’ Required Argument Error in Redux Saga

I am trying to learn redux saga by following the below tutorial.
but when I include the below line I am getting an error.

Error in /turbo_modules/@reduxjs/[email protected]/dist/redux-toolkit.cjs.development.js (525:15)
“reducer” is a required argument, and must be a function or an object of functions that can be passed to combineReducers

can you let me know how to fix it
providing my code below
I installed all the packages and tried to debug but still no luck.
I have created actions and reducers too

https://stackblitz.com/edit/react-9czykt?file=index.tsx,pages%2FHome.tsx,pages%2FAbout.tsx,App.tsx,reducers%2Freducers.js,actions%2Factions.js,API.tsx

https://ibjects.medium.com/getting-started-with-redux-saga-tutorial-740954fc9e49

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { StyledEngineProvider } from '@mui/material/styles';
import Demo from './Demo';
import Home from './pages/Home';
import About from './pages/About';
import Products from './pages/Products';
import Error from './pages/Error';
import SharedLayout from './pages/SharedLayout';
import SingleProduct from './pages/SingleProduct';
import Dashboard from './pages/Dashboard';
import Login from './pages/Login';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
//import { myReducer } from '../reducers';
import createSagaMiddleware from '@redux-saga/core';
import { myReducer } from './reducers/reducers';

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { useState } from 'react';

import { createRoot } from 'react-dom/client';
const sagaMiddleware = createSagaMiddleware();
//const store = configureStore({ reducer: myReducer });

// const store = configureStore({
//   reducer: myReducer,
//   middleware: [sagaMiddleware],
// });

const App = () => {
  const [user, setUser] = useState(null);

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<SharedLayout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="products" element={<Products />} />
          <Route path="products/:productId" element={<SingleProduct />} />
          <Route path="login" element={<Login setUser={setUser} />} />
          <Route path="login" element={<Login setUser={setUser} />} />

          <Route path="*" element={<Error />} />
        </Route>
      </Routes>
      <StyledEngineProvider injectFirst>
        <Demo />
      </StyledEngineProvider>
    </BrowserRouter>
  );
};

createRoot(document.querySelector('#root')!).render(
  <React.StrictMode>
    {/* <Provider store={store}> */}
    <App />
    {/* </Provider> */}
  </React.StrictMode>
);