url changes but not the component

Question

I want to redirect from saga middleware but the way I am doing just changes the url but shows the same page where I am currently. This is what I did.

function forwardTo(location) {
  console.log("location", history, location);
  history.push(location);
}

yield call(forwardTo, "/");

I am using redux toolkit and here is my setup

export function configureAppStore() {
  const reduxSagaMonitorOptions = {};
  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
  const { run: runSaga } = sagaMiddleware;

  // // Create the store with saga middleware
  const middlewares = [sagaMiddleware];

  const enhancers = [
    createInjectorsEnhancer({
      createReducer,
      runSaga,
    }),
  ];

  const store = configureStore({
    reducer: createReducer(),
    middleware: [...getDefaultMiddleware(), ...middlewares],
    devTools:
      /* istanbul ignore next line */
      process.env.NODE_ENV !== "production" ||
      process.env.PUBLIC_URL.length > 0,
    enhancers,
  });

  // Make reducers hot reloadable, see http://mxs.is/googmo
  /* istanbul ignore next */
  if (module.hot) {
    module.hot.accept("./reducers", () => {
      forceReducerReload(store);
    });
  }

  return store;
}

app.js
import { BrowserRouter as Router } from "react-router-dom";
<Provider store={store}>
  <Router>
     <RouterApp />
  </Router>
</Provider>

reducer.js

import { combineReducers } from "@reduxjs/toolkit";

/**
 * Merges the main reducer with the router state and dynamically injected reducers
 */
export function createReducer(injectedReducers = {}) {
  // Initially we don't have any injectedReducers, so returning identity function to avoid the error
  if (Object.keys(injectedReducers).length === 0) {
    return (state) => state;
  } else {
    return combineReducers({
      ...injectedReducers,
    });
  }
}

utils/history.js

import { createBrowserHistory } from "history";
const history = createBrowserHistory();
export default history;

How can i redirect to a particular route from saga middleware?

The reason why I am not using connected-react-router is https://reactrouter.com/web/guides/deep-redux-integration

I am not quite sure so I want to understand the recommended way to dispatch router action from saga.

UPDATED CODE

export function createReducer(injectedReducers = {}) {
  // Initially we don't have any injectedReducers, so returning identity function to avoid the error
  const rootReducer = combineReducers({
    ...injectedReducers,
    router: connectRouter(history),
  });
  return rootReducer;

}

index.js

const ConnectedApp = ({ Component }) => (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Component />
    </ConnectedRouter>
  </Provider>
);

const render = (Component) => {
  ReactDOM.render(<ConnectedApp Component={Component} />, MOUNT_NODE);
};

I get following issue Uncaught Could not find router reducer in state tree, it must be mounted under "router"