我正在使用react和redux创建一个简单的计数器应用程序。
以下是counterSlice.js文件。

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

export const counterSlice = createSlice({
  name: "counter",
  initialState: { count: 0 },
  reducers: {
    changeValueBy(state, action) {
      const value = action.payload;
      state["count"] = state["count"] + value;
    }
  }
});

export const { changeValueBy } = counterSlice.actions;

export const selectCount = (state) => state.count;

export default counterSlice.reducer;

以下是app/store.js文件：

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "../features/counter/counterSlice";

export default configureStore({
  reducer: {
    counter: counterReducer
  }
});

以下是index.js文件：

import App from "./App";
import store from "./app/store";
import { Provider } from "react-redux"

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

在这种设置下，代码不起作用。（整个代码的格式为this sandbox）
但在以下设置下，store可以正常工作。
App.js文件：

import { Counter } from "./features/counter/Counter";
import "./App.css";
import { Provider } from "react-redux";
import { createStore } from "redux";
import counterSlice from "./features/counter/counterSlice";

const store = createStore(counterSlice);

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Provider store={store}>
          <Counter />
        </Provider>
      </header>
    </div>
  );
}

整个代码的格式为this sandbox。
我想使用configureStore形式的@reduxjs/toolkit包，而不是过时的createStore从redux包。
你知道我该怎么做吗？