reactjs - カスタム ミドルウェアのフックを使用して状態から値を取得する

Question

クラス メソッドを呼び出して認証ヘッダーをすべての axios リクエストに追加するカスタム ミドルウェアを作成しましたが、このフックがフックを使用して状態からデータを選択しようとするとエラーが発生しますuseSelector。

Invalid hook call. Hooks can only be called inside of the body of a function component

このミドルウェアから状態の accessToken ストアを取得するにはどうすればよいですか?

middlewares.ts

import { Dispatch } from 'react';
import { AnyAction, Middleware, MiddlewareAPI } from 'redux';
import { authManager } from 'src/features/auth/authManager';
import { authActions } from 'src/features/auth/redux';
import { RootState } from '.';

export const setIsAxiosAuthorized: Middleware = (api: MiddlewareAPI) => (
  next: Dispatch<AnyAction>
) => (action) => {
  authManager.setAxiosAuthorizationToken();
  api.dispatch(authActions.setIsAxiosAuthorized(true));
  return next(action);
};

authManager.ts

import axios from 'axios';
import authService from './authService';
import { useAuth } from './hooks';

let axiosInstance = axios.create();

class AuthManager {
  constructor() {
    axiosInstance.interceptors.response.use(
      (response) => response,
      async (error) => {
        if (error?.response?.status === 401) {
          return Promise.resolve();
        }
        return Promise.reject(error);
      }
    );
  }

  getAxiosInstance = () => axiosInstance;

  resetAxiosInstance = () => {
    axiosInstance = axios.create();
  };

  getAccessToken = authService.getAccessToken;

  setAxiosAuthorizationToken = () => {
    const { accessToken } = useAuth();
    axiosInstance.interceptors.request.use(
      (config) => {
        let headers = config.headers ? { ...config.headers } : {};
        headers = {
          ...headers,
          Authorization:
            accessToken !== undefined ? `Bearer ${accessToken}` : '',
        };
        config.headers = headers;
        return config;
      },
      (error) => Promise.reject(error)
    );
  };
}

export const authManager = new AuthManager();