Been trying all morning and for the life of me I can't get individual array data to be displayed from my API. I am trying to display one body of text from an array at a time, and can only get it to output all at once. Had it working when the data was in JSON format but now its in an array I'm struggling to make it work.

My code:

 componentDidMount() {
    axios
      .get(
        "API_DATA"
      )
      .then((res) => {
        let data = res.data
        this.setState({ data, loading: false });
        console.log(data)
      });
  }

  render() {
    if (this.state.loading) {
      return <Loader />
    }
    // return table if loading is false
    // handling error goes with the same logic
    // table will only render if loading is false
    else 
    return (
       this.state.data.data).map((item) => (
          <>
            <p key={item.id}>{item.title}</p>
          </>
        ))
     
    
  }
}

I previously used added [0] or [1] etc to determine which element I wanted to display and this worked very nicely however if I try this.state.data.data[0]).map((item) => ( It states it is not a function.

Expected output of API:

{
    "data": [
        {
            "id": 9,
            "status": "published",
            "body": "TEST1",
            "availability": "internal",
            "title": "Test1",
            "posted_by": "Tester"
        },
        {
            "id": 10,
            "status": "published",
            "body": "TEST",
            "availability": "internal",
            "title": "TEST2",
            "posted_by": "Tester"
        },