I'm working through a project right now, but I'm pretty hard stuck on trying to get these components to work together. I'm having a hard time understanding how I should be sending the UUID from the AgentBox component to API call in the page.tsx under the [uuid] file, and then into the AgentPage. component. I'm also unable to get any data when I console.log the API call for the specified Agent based on UUID. I think this is because I haven't been able to figure out how to get the UUID correctly. Here's some more detail:

1. When the user opens the list of agents, they are presented with boxes of each individual agent (AgentBox.tsx component). Each of these components has a <Link></Link> that links the user to the Agent Specific page, here is the code below for AgentBox.tsx:

import Image from "next/image";
import Link from "next/link";
import { Agent } from "../../types/Agents.type";
import React from "react";

type Props = {
  agent: Agent;
};

const AgentBox: React.FC<Props> = ({ agent }) => {
  return (
    <Link
      href={`/agents/${agent.uuid}`}
      className="flex flex-col max-w-[400px] items-center border-2 hover:border-indigo-500 rounded-3xl bg-indigo-100 hover:bg-indigo-400 transition hover:ease-in-out hover:duration-200 z-20 overflow-hidden"
    >
      <Image
        src={agent.fullPortrait}
        width={400}
        height={400}
        alt="Agent full portrait"
        className="hover:transition hover:duration-300 hover:scale-105 hover:ease-in-out hover:translate-y-1 z-0"
      />
      <div className="flex gap-5 py-2 font-extrabold text-xl text-white bg-indigo-500 rounded-t px-3 h-10 items-center z-10">
        <p>{agent.displayName}</p>
        <div className="flex gap-1 items-center">
          <Image
            src={agent.role.displayIcon}
            width={20}
            height={20}
            alt={`${agent.role.displayName} icon`}
          />
          <p>{agent.role.displayName}</p>
        </div>
      </div>
    </Link>
  );
};

export default AgentBox;

From there, I have the file structure for the UUID of each agent to be (app > agents > [uuid] > page.tsx). This is where the API call for the specific UUID will come into play, which will be sent down to the <AgentPage/> component. Here's the code I have right now:

import React from "react";
import AgentPage from "../../components/AgentPage";

type Props = {
  params: {
    uuid: string;
  };
};

const getAgentsData = async ({ uuid }: any) => {
  const res = await fetch(`https://valorant-api.com/v1/agents/${uuid}`);
  const data = await res.json();
  return data;
};

export default function Agent({ uuid }: any) {
  const data = getAgentsData

  return <AgentPage agentId={uuid} />;
}

Below is a few lines from the AgentPage.tsx component:

"use client";

import React, { useContext, useEffect } from "react";
import { Agent } from "../../types/Agents.type";
import Image from "next/image";

type Props = {
  agentId: string;
  loading?: boolean;
};

const AgentPage: React.FC<Props> = ({ agentId, loading = false }) => {

  if (loading)
    return <div className="text-center text-2xl font-bold">Loading...</div>;

  return (
    <>
      <div className="min-h-screen">
        <div>
          {agentId.map((agent: Agent) => (
            <div key={agent.uuid} className="flex flex-col items-center">
              <h1 className="text-center uppercase text-2xl font-bold mb-3">
                {agent.displayName}
              </h1>
              <Image
                src={agent.displayIcon}

Any help is greatly appreciated!