dynamic add components based on user input

I'm creating a page where a person can search for pokemon. If the pokemon API finds such a pokemon, it displays it in the list below, but I have one problem. I have absolutely no idea how to display more than one component with data. Especially when fetching, the date saves the id of a given pokemon to make it unique, but I have no idea how to implement it into the code to make it work this way.

Main.js

import React from 'react'
import './Main.css'
import { useState } from 'react';
import CardComponent from './CardComponent';



const Main = () => {

    const [value, setValue] = useState('')
    const [pokemonName, setPokemonName] = useState('');
    const [pokemonPhoto, setPokemonPhoto] = useState('');
    const [pokemonIndex, setPokemonIndex] = useState('');

    const exportDataToClass = (event) => {
        event.preventDefault();
        setValue(event.target.value)
    }

    const handleClick = event => {
        event.preventDefault();
        
        fetch(`https://pokeapi.co/api/v2/pokemon/${value}`)
        .then((res) => res.json())
        .then((data) => {
            let index = 0;
            setPokemonName(data.name);
            setPokemonPhoto(data.sprites.other.dream_world.front_default);
            setPokemonIndex(data.id);  
        })
    };

    


  return (
    <div>
        <div className="container">
            <div className="container-header">
                    <h1 className='title'>POKEMON FINDER</h1>
                    <div className='container-content'>
                        <input className='pokemon-finder' type='text' placeholder='POKEMON FINDER..' onChange={exportDataToClass} value={value}/>
                        <button className='button' type='submit' onClick={handleClick}>Find</button>
                    </div>
            </div> 
            <div className="container-content-cards">
                <h1 className='title'>Pokemons</h1>
                <div className='cards'>
                  <CardComponent pokemonName={pokemonName} pokemonPhoto={pokemonPhoto}/>
                </div>   
            </div>
        </div>
    </div>  
  )
}

export default Main

CardComponent.js

import React from 'react'
import './CardComponent.css'

const CardComponent = ({pokemonName,pokemonPhoto, pokemonIndex}) => { 
return (
    <div className='pokemon-card'>
            <div className='pokemon-card-content'>
                <span className='pokemon-card-name'>{pokemonName}</span>
                <img className='pokemon-card-image' src={pokemonPhoto} alt={pokemonName} />
                </div>
        </div>
  )
}

export default CardComponent