Oh, I missed that. Then we need to adjust a little bit. For example, I've created a custom class that wraps axios instance and transforms response and error. This way I'm not leaking axios instances to the application layer and have more control over the error and response object. I'm using Axios interceptors to catch errors and provide my own error in the application. In my case, I simply transformed the error object to be able to access its properties for validation purposes easily. 
```ts
import axios from 'axios';
import type { AxiosError, AxiosResponse } from 'axios';
import type { HTTPClient, HTTPOptions, HTTPError } from '@/types/API';
import { isObject } from '@/utils';
import { getLocalStorageItem, logout } from '@/hooks';

interface ApiError {
  message: string;
  status: number;
  fields: Record<string, string[] | undefined>;
}

function transformError(error: HTTPError): ApiError {
  return {
    message: error.error,
    status: error.statusCode,
    fields: error.message.reduce(
      (acc, current) => {
        acc[current.property] = current.errors;
        return acc;
      },
      {} as Record<string, string[]>
    ),
  };
}

function transformResponse<T>(response: AxiosResponse<T>): T {
  return response.data;
}

export function isApiError(error: unknown): error is ApiError {
  return isObject(error) && 'fields' in error;
}

export function getApiFieldError(
  error: ApiError,
  field: string
): string | undefined {
  return error.fields[field]?.join(', ');
}

class ApiClient implements HTTPClient {
  private client = axios.create({
    baseURL: import.meta.env.VITE_API_URL,
  });

  constructor() {
    this.client.interceptors.request.use((config) => {
      // Don't include credentials for current request
      if (config.headers.Authorization === null) return config;

      const token = getLocalStorageItem<string>('token');

      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }

      return config;
    });
    this.client.interceptors.response.use(
      (res) => res,
      (err: AxiosError<HTTPError>) => {
        if (err.response) {
          const { response } = err;

          if (response.status === 401) {
            logout();
          }

          return Promise.reject(transformError(response.data));
        }
        return Promise.reject(err);
      }
    );
  }

  get<T>(url: string, options?: HTTPOptions): Promise<T> {
    return this.client.get(url, options).then(transformResponse);
  }

  post<D, R>(url: string, data?: D, options?: HTTPOptions): Promise<R> {
    return this.client.post(url, data, options).then(transformResponse);
  }

  patch<D, R>(url: string, data?: D, options?: HTTPOptions): Promise<R> {
    return this.client.patch(url, data, options).then(transformResponse);
  }

  put<D, R>(url: string, data?: D, options?: HTTPOptions): Promise<R> {
    return this.client.put(url, data, options).then(transformResponse);
  }

  delete<T>(url: string, options?: HTTPOptions): Promise<T> {
    return this.client.delete(url, options).then(transformResponse);
  }
}

const apiClient = new ApiClient();

export default apiClient;
```