I need help on fetching and displaying data from an API on RapidAPI (ASOS API) using Next.js

Question

I would really appreciate if anyone could help me fetch and display data from the ASOS API on RapidAPI (ASOS API). I'm using Next.js.

I tried to fetch and display data from the API, but nothing is showing on my end.

I've already created the interface for it on "types/index.ts":

export interface ClothingProps {
  id: number;
  name: string;
  price: {
    value: number;
    text: string;
    currency: string;
  };
  colour: string;
  brandName: string;
  hasVariantColours: boolean;
  hasMultiplePrices: boolean;
  productCode: number;
  productType: string;
  imageUrl: string;
}

And on "utils/index.ts" I've tried to fetch like this:

const ASOS_API_KEY = process.env.ASOS_API_KEY;
const ASOS_API_URL = process.env.ASOS_API_URL;
const ASOS_API_CONFIG = {
  store: "US",
  offset: "0",
  categoryId: "27110",
  limit: "10",
  country: "US",
  sort: "freshness",
  currency: "USD",
  sizeSchema: "US",
  lang: "en-US",
};

async function fetchASOSProducts() {
  const queryParams = new URLSearchParams(ASOS_API_CONFIG).toString();
 try {
    const response = await fetch(`${ASOS_API_URL}?${queryParams}`, {
      method: "GET",
      headers: {
        "X-RapidAPI-Key": ASOS_API_KEY,
        "X-RapidAPI-Host": "asos2.p.rapidapi.com",
      },
    });

    if (!response.ok) {
      throw new Error("Failed to fetch data");
    }

    const data = await response.json();
    // Assuming the clothing items are contained in data.products, adjust this part as needed
    const clothingItems = data.products || [];
    return clothingItems;
  } catch (error) {
    throw new Error(`ASOS API Error: ${error.message}`);
  }
}

export default fetchASOSProducts;

And I'm trying to display the data like this:

import { ClothingProps } from "@/types";
import Image from "next/image";
import React from "react";

interface NavClothingProps {
  clothing: ClothingProps;
}

const ClothingCard = ({ clothing }: NavClothingProps) => {
  const { name, price, imageUrl } = clothing;

  return (
    <div className="clothing-card">
      <Image src={imageUrl} alt={name} width={48} height={48} />
      <h3>{name}</h3>
      <p>Price: ${price.value} {price.currency}</p>
    </div>
  );
};

export default ClothingCard;

Finally, I tried to render the card on my homepage like this:

"use client";

import Image from "next/image";
import ClothingCard from "@/components/shared/ClothingCard";
import { useEffect, useState } from "react";
import fetchASOSProducts from "@/utils"; // Adjust the import path

export default function Home() {
  const [clothingData, setClothingData] = useState([]);

  useEffect(() => {
    // Fetch data from your API using your fetchASOSProducts function
    async function fetchData() {
      try {
        const data = await fetchASOSProducts();
        setClothingData(data); // Set the fetched data in the state
      } catch (error) {
        console.error("Error fetching data", error);
      }
    }

    fetchData();
  }, []);

  return (
    <section>
      <h1>Clothing Items</h1>
      <div className="clothing-card-container">
        {clothingData.map((clothing) => (
          <ClothingCard key={clothing.id} clothing={clothing} />
        ))}
      </div>
    </section>
  );
}

Any help would be really appreciated. And if anyone needs more info on any other file, etc., I'll gladly provide. And if it's just a noob mistake, I apologize!

Tried to follow the tutorial here on this video : https://www.youtube.com/watch?v=A6g8xc0MoiY&t=10054s&ab_channel=JavaScriptMastery (at around 2h30min), and I still couldn't crack it. The only thing I tried more was just writing the code provided above.

As I've mentioned before, would appreciate any help!