Как правильно подключиться к API используя Header Authorization Bearer, React.js и axios?

Заранее прошу прощения за такой вопрос, впервые использую React. Нужно подключиться к API и взять с неё данные, после тчетных попыток обращаюсь к вам за помощью, скажите, где моя ошибка, в какую сторону смотреть, что я делаю не так ?! Проверил в postman - подключается, видно json. Спасибо !!!

import React, { useState, useCallback } from "react";
import "./App.css";
import axios from "axios";

const accessToken = "туть токен";
const apiUrl = "туть ссылка на API";

const authAxios = axios.create({
  baseUrl: apiUrl,
  headers: {
    Authorization: `Bearer ${accessToken}`,
  },
});

function App() {
  const [payments, setPayments] = useState([]);
  const [requestError, setRequestError] = useState();

  const fetchData = useCallback(async () => {
    try {
      const result = await authAxios.get(`/payments/all`);
      setPayments(result.data);
    } catch (error) {
      setRequestError(error.message);
    }
  });

  return (
    <div className="container">
      <button onClick={() => fetchData()}> Get payments </button>
      {payments.map((payment) => {
        return <p key="payment.id"> {payment.id} </p>;
      })}
      {requestError && <p className="error"> {requestError} </p>}
    </div>
  );
}

export default App;

В итоге результат —