Next.js + Redux Toolkit

こちらの記事を参考にnext.js(ts)でRedux Toolkitを試しています。
https://zenn.dev/matsutoba/articles/a9695787d616bf

下記コードでフックを使った表示がうまくいかないためアドバイスください。

コード

pages/_app.tsx

js
1import React from "react";
2import type { AppProps } from "next/app";
3import { Provider } from "react-redux";
4import { configureStore, createSlice } from "@reduxjs/toolkit";
5
6export type CounterState = {
7  value: number;
8};
9
10const initialState: CounterState = { value: 0 };
11
12export const counterSlice = createSlice({
13  name: "counter",
14  initialState,
15  reducers: {
16    increment(state) {
17      state.value++;
18    },
19  },
20});
21
22export const store = configureStore({
23  reducer: {
24    counter: counterSlice.reducer,
25  },
26});
27
28function MyApp({ Component, pageProps }: AppProps) {
29  return (
30    <Provider store={store}>
31      <Component {...pageProps} />
32    </Provider>
33  );
34}
35export default MyApp;

pages/index.tsx

js
1import { useDispatch, useSelector } from "react-redux";
2import { counterSlice, CounterState, store } from "./_app";
3import { NextPage } from "next";
4
5const Home: NextPage = () => {
6  const dispatch = useDispatch();
7  const selector = useSelector((state: CounterState) => state);
8  const { increment } = counterSlice.actions;
9
10  return (
11    <div>
12      <p>{selector.value}</p>
13      <button
14        onClick={() => {
15          dispatch(increment());
16        }}
17      >
18        Click
19      </button>
20    </div>
21  );
22};
23
24export default Home;