Mounting Data into React State Returning Error

Question

I have some data which I'm calling from an API. I was to update the data into my declared state which some of it works. But one of my state data is returning an error that "Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the component will unmount method."

Below is my Image Data file. The line giving the error is commented out in the return method.

import React, { Component } from "react";
import axios from "axios";
import { Card } from 'react-bootstrap';

export default class imagedata extends Component {
  state = {
    img: "",
    infodata: [],
    alldata: [],
  };
  componentDidMount() {
    this.fetchCatDetails();
  }
  fetchCatDetails = async () => {
    const info = `https://api.thecatapi.com/v1/breeds`;
    const url = `https://api.thecatapi.com/v1/images/search?breed_id=${this.props.option.id}`;
    try {
      const response = await axios.get(url);
        // console.log(response)
      const img = await response.data[0].url;
     
        //  console.log(alldata)
      this.setState({
        img
      });


      const allresult = await axios.get(url);
      const alldata = await allresult.data[0];
      this.setState({
        alldata,
      });



      const response1 = await axios.get(info);
      const infodata = await response1.data;
    //   console.log(infodata)
      this.setState({
        infodata,
      });
    } catch (error) {
      console.log(error);
    }
  };

  render() {
    const {
      option: {
        name,
        origin,
        temperament,
        life_span,
        weight: { metric },
        description,
      },
    } = this.props;
    return (
      <div className="center">
          <img src={this.state.img} alt="" loading="" className="img"/> <br/>
          {name} <br/>
          {origin} <br/>
          {description}
        
        {this.state.alldata.map((item, id) => (
          <div key={id}>
            
             {/*   This line below is the line returning the error */}
             {console.log(item)} 
          </div>
        ))}

      
      </div>
    );
  }
}

Here is my index.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import Imagedata from "./Imagedata";
import './style.css'

class App extends Component {
  state = {
    data: [],
  };

  componentDidMount() {
    this.fetchData();
  }
  fetchData = async () => {
    const url = "https://api.thecatapi.com/v1/breeds";
    try {
      const response = await axios.get(url);
      const data = await response.data;
      this.setState({
        data,
      });
    } catch (error) {
      console.log(error);
    }
  };

  render() {
    return (
      <div className="App">
        <h1>React Component Life Cycle</h1>
        <h1>Calling API</h1>
        <div>
          {this.state.data.map((item, id) => (
            <div key={id}>
              <Imagedata option={item} />
            </div>
          ))}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));