redux toolkit のuseSelectorでエラーが出てしまう

前提・実現したいこと

react初学者です。
redux toolkitでuseSelectorを使ってstateを呼び出そうとしていますが、
エラーが発生してしまいます。
スライスの記述の方法に問題があると想定しておりますが解決に至りません。
原因を教えていただけると助かります。

発生している問題・エラーメッセージ

エラーメッセージ
TypeError: Cannot read property 'userInfo' of undefined
selectUserInfo
src/features/login/loginSlice.js:90
  87 | });
  88 | 
  89 | // export const selectUserInfo = (state) => state.account.userInfo;
> 90 | export const selectUserInfo = (state) => state.account.userInfo;
  91 | 
  92 | export default loginSlice.reducer;
  93 |

該当のソースコード

configureStore

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

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    login: loginReducer,
  },
});

loginSlice.js

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

const baseUrl = "https://hitofull.graph.com/v10.0";

/********************************************
 * Document
 * crateAsyncThunk
 * this accepts below
 * 1. Redux action type string
 * 2. callback function which should return a promise
 ********************************************/

export const fetchAsyncGetUserInfo = createAsyncThunk(
  "user_id/get",
  async (response) => {
    console.log(response);
    let apiUrl =
      baseUrl + `${response.id}/accounts?access_token=${response.accessToken}`;
    const page_id = await axios.get(apiUrl);
    console.log(page_id);
    console.log(response);
    console.log(apiUrl);
    return response;
  }
);

export const fetchAsyncGetPageId = createAsyncThunk(
  "page_id/get",
  async (user_id) => {
    let apiUrl = baseUrl + `${user_id}/accounts`;
    const page_id = await (await axios.get(apiUrl)).data[0].id;
    return page_id;
  }
);

const loginSlice = createSlice({
  name: "account",
  initialState: {
    userInfo: {
      user_id: "",
      accessToken: "",
      expiresIn: "",
      signedRequest: "",
      page_id: "",
    },
    igUser: {
      ig_user_id: "",
    },
  },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchAsyncGetPageId.fulfilled, (state, action) => {
      return {
        ...state,
        page_id: action.payload.value,
      };
    });
    builder.addCase(fetchAsyncGetUserInfo.fulfilled, (state, action) => {
      console.log(action);
      return {
        ...state,
        userInfo: {
          user_id: action.payload.id,
          accessToken: action.payload.accessToken,
          expiresIn: action.payload.expiresIn,
          signedRequest: action.payload.signedRequest,
          // page_id: "",
        },
      };
    });
  },
});

// export const selectUserInfo = (state) => state.account.userInfo;
export const selectUserInfo = (state) => state.account.userInfo;

export default loginSlice.reducer;

呼び出し先

Login.js
import React, { Fragment } from "react";

import { useSelector, useDispatch } from "react-redux";
import {
  fetchAsyncGetPageId,
  fetchAsyncGetUserInfo,
  selectUserInfo,
} from "./loginSlice";

const Login = () => {
  const dispatch = useDispatch();
  const userInfo = useSelector(selectUserInfo);

  return (
    <Fragment>
      <div className="status"></div>
      {userInfo ? userInfo : "none"}
    </Fragment>
  );
};

export default Login;

ご教授のほど宜しくお願いいたします。