Where to put and how to use Modal

Question

I'm starting to learn React and followed a tutorial to build a small e-commerce website. It is very basic. There is a list of product with an add to cart button under each product. Now I want to add new features, clic on an item opens a popup with the details and have a button to add it to cart.

I was able to create the popup with the item details, but I don't uderstand how to make the add to cart button work

Can someone explain me how I should do?

App.js

import Banner from './Banner'
import Cart from './Cart'
import Footer from './Footer';
import ShoppingList from './ShoppingList';
import '../styles/Layout.css'
import { useState } from 'react'

function App() {

  function getPanier(){
    const panier = JSON.parse(localStorage.getItem("panier"))
    if (panier != null)
      return panier;
    else return []
  }
  const [cart, updateCart] = useState(getPanier())

  return (<div>
    <Banner/>
    <div className='lmj-layout-inner'>
                <Cart cart={cart} updateCart={updateCart}/>
                <ShoppingList cart={cart} updateCart={updateCart}/>
            </div>
    <Footer/>
    </div>
  );
}

export default App;

ShoppingList.js

import { plantList } from '../data/plantList'
import PlantItem from './PlantItem'
import '../styles/ShoppingList.css'
import Categories from './Categories'
import { useState, useEffect } from "react";


function ShoppingList({ cart, updateCart }) {
    
    const [category, setCategory] = useState("all");
    

    function filterPlantByCat(category){
        
        if(category!== 'all'){
        const plants = plantList.filter((plant) => plant.category === category)
        return plants
        }
        else
        return plantList
    }

    const plants = filterPlantByCat(category)

    useEffect(() => {
        localStorage.setItem("panier", JSON.stringify(cart));
    }, [cart])

    function addToCart(name, price) {
        const currentPlantSaved = cart.find((plant) => plant.name === name)
        if (currentPlantSaved) {
            const cartFilteredCurrentPlant = cart.filter(
                (plant) => plant.name !== name
            )
            updateCart([
                ...cartFilteredCurrentPlant,
                { name, price, amount: currentPlantSaved.amount + 1 }
            ])
        } else {
            updateCart([...cart, { name, price, amount: 1 }])
        }
        console.log(cart)
        
    }


    return (
        <div className='lmj-shopping-list'>
            <Categories category={category} setCategory={setCategory}/>
            <ul className='lmj-plant-list'>
                {plants.map(({ cart, updateCart, id, cover, name, water, light, price, description }) => (
                    <div key={id}>
                        <PlantItem
                        cart ={cart}
                        updateCart={updateCart}
                            cover={cover}
                            name={name}
                            water={water}
                            light={light}
                            price={price}
                            description={description}
                            
                        />
                        <button onClick={() => addToCart(name, price)}>Ajouter</button>
                        
                    </div>
                ))}
            </ul>
        </div>
    )
}

export default ShoppingList

PlantItem.js

import CareScale from "./CareScale";
import { useState, useEffect } from "react";
import Popup from './Popup';
import '../styles/PlantItem.css'

function PlantItem({cart, updateCart, name, cover, id, light, water, description}){

    const [isVisible, setVisibility] = useState(false);
    
    function togglePopup(){
        if (isVisible == false){
           setVisibility(true)
        }
        else{
            setVisibility(false)
        }

    }


    return (
        <div>
        <li onClick={() => togglePopup()} key={id} className='lmj-plant-item'>
            {name} 
            <img alt = {cover} src= {cover} className='lmj-plant-item-cover'/>
            <CareScale  careType='water' scaleValue={water} />
            <CareScale  careType='light' scaleValue={light} />
        </li>
        <Popup cart={cart} updateCart={updateCart} isVisible={isVisible} setVisibility={setVisibility} title={name} cover={cover} description={description}/>
        </div>
    )
}

export default PlantItem

Popup.js

import '../styles/Popup.css'

function Popup({cart, updateCart, isVisible, setVisibility, title, cover, description, price}){

    function addToCartPopup(title, price){
        
    }

    return (
        isVisible ? 

        <div className='popup'>
            <div className='popup-header'>
                <p>{title}</p>
                <button onClick={() => setVisibility(false)}>Close X</button>
            </div>
            <div className='popup-content'>
                <p>{description}</p>
                <img alt = {cover} src= {cover} className='lmj-plant-item-cover'/>
                <p>{price}€</p>
                <button onClick={() => addToCartPopup(title, price) }>Ajouter</button>
            </div>
            
        </div> :
        null
    )
}

export default Popup

Thanks