ОШИБКА axios.get при использовании метода axios.create с использованием baseUrl

Я попытался создать приложение из случайного пользовательского API в реакции и использовал библиотеку axios для HTTP-запросов. Я создал отдельный файл для базового API, используя axios.create, и код файла выглядит так:

import axios from 'axios'

export default axios.create({
  baseURL: `http://jsonplaceholder.typicode.com`,
}); 

Затем я использовал это в другом файле, чтобы сделать запрос GET и сохранить данные в state на componentdidMount, чтобы я мог получить доступ к данным в пользовательском интерфейсе.

import React from "react";
import API from "../api";
export default class PersonList extends React.Component {
  state = {
    persons: []
  };
  componentDidMount() {
    API
      .get('/').then((data) => {
      const persons = data.data;
      this.setState({ persons });
      console.info(this.state.persons);
    });
  }
  render() {
    const { persons } = this.state;
    console.info('Stato',persons)
    return (
      <ul>
        {persons.map((person) => (
          <li key = {person.id}>{person.name}</li>
        ))}
      </ul>
    );
  }
}

Но это не работает, потому что состояние не заполнено данными пользователей, поэтому функция .map() выдает ошибку.