Получение useSelector как неопределенного в React с использованиемact-redux-toolkit

Question

У меня есть это простое приложение, в котором я пытаюсь создать систему аутентификации с использованием React Redux Toolkit, но я получаю TypeError: _useSelector is undefined, но это не имеет смысла для меня, если кто-то может увидеть, что я делаю неправильно, пожалуйста, может подскажите?

У меня есть срез:

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

export const initialState = {
  loading: false,
  hasErrors: false,
  userData: {},
};

const loginSlice = createSlice({
  name: "login",
  initialState,
  reducers: {
    login: (state) => {
      state.loading = true;
    },
    loginSuccess: (state, { payload }) => {
      state.usuario = payload;
      state.loading = false;
      state.hasErrors = false;
    },
    loginFailure: (state) => {
      state.loading = false;
      state.hasErrors = true;
    },
  },
});

export const { login, loginSuccess, loginFailure } = loginSlice.actions;

export const loginSelector = (state) => state.userData;

export default loginSlice.reducer;

export const fetchLogin = (username, password) => {
  return async (dispatch) => {
    dispatch(login());

    try {
      const response = await fetch("http://10.2.54.8:8085/login-api/auth", {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
        credentials: "same-origin",
        body: JSON.stringify({
          username: username,
          password: password,
        }),
      });

      const data = await response.json();

      dispatch(loginSuccess(data));
    } catch (error) {
      console.log(error);
      dispatch(loginFailure());
    }
  };
};

Мой индекс среза:

import { combineReducers } from 'redux'

import postsReducer from './posts'
import postReducer from './post'
import commentsReducer from './comments'
import loginReducer from './login-slice'

const rootReducer = combineReducers({
  posts: postsReducer,
  comments: commentsReducer,
  post: postReducer,
  login: loginReducer
})

export default rootReducer

И у меня есть подписывающий компонент:

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchLogin, loginSelector } from "../slices/login-slice";
...
const SignInSideComponent = () => {
  const dispatch = useDispatch();
  const { userData, loading, hasErrors } = useSelector(loginSelector); // The error happens here, when I remove it the error vanishes, but I need this
...

Я не понимаю, почему useSelector будет неопределенным, и этот момент.

Мой пакет. json:

{
  "name": "general-manager",
  "version": "1.0.0",
  "description": "A general manager react-redux-toolkit",
  "keywords": [],
  "main": "src/index.js",
  "dependencies": {
    "@material-ui/core": "^4.9.9",
    "@material-ui/icons": "^4.9.1",
    "@reduxjs/toolkit": "1.2.5",
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "react-redux": "7.2.0",
    "react-router-dom": "5.1.2",
    "react-scripts": "3.0.1",
    "redux": "4.0.5"
  },
  "devDependencies": {
    "typescript": "3.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

И индекс. js, показывающий магазин:

import React from 'react'
import { render } from 'react-dom'
import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'

import App from './App'
import rootReducer from './slices'

import './index.css'

const store = configureStore({ reducer: rootReducer })

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Вот распечатка браузера: