React: Moving component to different div on click

I’m very new to React so any advice would be appreciated on how to move an agent thumbnail to the teamComp div when it is clicked.

I’m also lost as to how to tackle filtering the data through a dropdown menu. Like how would I update the page without refreshing so that only the agents with the selected roles appear.

Anything would help, like I said before, I am a complete beginner to React and feel like I am underutilizing a lot of what makes React powerful.

App.js

import { useEffect, useMemo, useState } from "react";
import AgentCard from "./components/agentCard";
import Select from "react-select"

function App() {
  const options = useMemo(
    () => [
      {value: "controller", label: "Controller"},
      {value: "duelist", label: "Duelist"},
      {value: "initiator", label: "Initiator"},
      {value: "sentinel", label: "Sentinel"},
      
    ],
    []
  );

  const [agentDetails, setAgentDetails] = useState([]);

  const getAllAgents = async () => {
    const res = await fetch("https://valorant-api.com/v1/agents/");
    const results = await res.json();

    const agentNames = [],
      agentImages = [],
      agentRoles = [],
      agentDetails = [];

    for (let i = 0; i < Object.keys(results["data"]).length; i++) {
      if (results["data"][i]["developerName"] != "Hunter_NPE") {
        agentNames.push(results["data"][i]["displayName"]);
        agentImages.push(results["data"][i]["displayIcon"]);
        agentRoles.push(results["data"][i]["role"]["displayName"]);
      } 
      else {
        continue;
      }
    }

    for (let i = 0; i < agentNames.length; i++) {
      agentDetails[i] = [agentNames[i], [agentImages[i], agentRoles[i]]];
    }
    agentDetails.sort();
    setAgentDetails(agentDetails);
  };

  useEffect(() => {
    getAllAgents();
  }, []);

  return (
    <div className="app-container">
      <h2>Valorant Team Builder</h2>
      <div className="teamComp">
      </div>
      <Select options={options} defaultValue={options} isMulti/>
      <div id="agent_container" className="agent-container">
        {agentDetails.map((agentDetails) => (
          <AgentCard
            img={agentDetails[1][0]}
            name={agentDetails[0]}
            role={agentDetails[1][1]}
          />
        ))}
      </div>
    </div>
  );
}

export default App;

agentCard.js

import React from 'react'

const agentCard = ({role, name, img}) => {
    return (
        <div className="card-container">
            <div className="img-container">
                <img src={img} alt={name} />
            </div>
            <div className="info">
                <h3 className="name">{name}</h3>
                <small className="role"><span>Role: {role}</span></small>
            </div>
        </div>
    )
}

export default agentCard

index.css

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400&display=swap');

* {
    box-sizing: border-box;
}

body {
    background: #EFEFBB;
    background: -webkit-linear-gradient(to right, #D4D3DD, #EFEFBB);
    background: linear-gradient(to right, #D4D3DD, #EFEFBB);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Lato';
    margin: 0;
}

h1 {
    letter-spacing: 3px;
}

.agent-container {
    display: flex;
    flex-wrap: wrap;
    align-items: space-between;
    justify-content: center;
    margin: 0 auto;
    max-width: 1200px;
}

.app-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 3rem 0.5rem;
  }

.card-container {
    background-color: #eee;
    border-radius: 20px;
    box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5);
    margin: 10px;
    padding: 20px;
    text-align: center;
}

.card-container:hover {
    filter: brightness(70%);
    transition: all 150ms ease;
}

.img-container img {
    margin-top: 1.5rem;
    height: 128px;
    width: 128px;
}

.name {
    margin-bottom: 0.2rem;
}

.teamComp h3 {
    float: left;
}