I'm trying to extract the data from this API https://fe-assignment.vaimo.net/ to render the object name. It should be a drone sale item but I cant display it on mapping or such.

I only have to extract this items data and there are no other objects or such in the API. I want to eventually display the product with its image, and all its attributes but I am just trying to extract simple strings from the JSON like the product name.

The result of the above code when ran is simply the heading with no further content. Both console logs return the API data in full. See ComponentDidMount and render

import { render } from "@testing-library/react"
import React from "react"
import "./App.css"
import {useState, useEffect } from 'react'
import axios from 'axios'
import Colors from "./components/Colors"
import DetailsThumb from "./components/DetailsThumb"

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false,
    };
  }

  

  componentDidMount() {
    fetch("https://fe-assignment.vaimo.net/")
      .then((res) => res.json())
      .then(data => { console.log(data)
        this.setState({
          isLoaded: true,
          items: data,
        });
      });
  }

  render() {
    let content = null
    var { isLoaded, items } = this.state;
    if (!isLoaded) {
      return <div>Loading..</div>;
    } else {
      console.log(items)
      if (items.data){
        content = items.map((product, key) => <div>{product.name}</div>)
      }
      return (
        <div>
          <h1>The drone page</h1>
          {content}
          </div>
      );
    }
  }
}

export default App;