How can i pass a return value into a useEffect in Reactjs?

i'm creating a store that when u click on the button you'll be redirected to paypal, but i came across a doubt about how i could pass my value of the cost into the button but first of all into the value amount of paypal?

the data is taken from the database using mysql and then axios, as u can see i used a map and named val with the variable of database:

That's my code:

import React,{useState, useEffect, useRef} from 'react'
import Axios from 'axios'
import Navbar from '../Navbar/Navbar'
import styled from 'styled-components'
import { Desc } from '../Store/Desc'
import { ButtonStore } from '../Buttons/Button/Button'
import './Store.css'


function Store() {

const [cards, setCards] = useState([])
const [payValue, setPayValue] = useState("");

const paypal = useRef()

useEffect(() => {
Axios.get("http://localhost:3001/gems", {
}).then((response) => {
setCards(response.data);
})
}, [])

useEffect(() => {
window.paypal.Buttons({
    createOrder: (data, actions, err) => {
        return actions.order.create({
            intent: "CAPTURE",
            purchase_units: [{
                description: 'Points',
                amount: {
                    currency_code: "EUR",
                    value: // HERE IS WHERE I WANT TO DEFINE THE VALUE WHEN I CLICK THE BUTTON
                }
            }]
        })
    },
    onApprove: async(data, actions) => {
        const order = await actions.order.capture()
        console.log(order)
    },
    onError: (err) => {
        console.log(err)
    }
}).render(paypal.current)
}, [])

return (
    <>
    <Navbar/>
    <HeroContainer>
    <HeroBg>
    </HeroBg>
    <HeroContent>
      <HeroItems>
          <HeroH1>get more points and unlock new content!</HeroH1>
          <HeroH6>Gems</HeroH6>
          {cards.map((val) => {
          const a = val.Price1;
          return(
          <div className="flex">
          <div className="columns">
          <ul className="price">
          <li className="header"></li>
          <li className="grey">$ {val.Price1}</li>
          <li>{val.Point1}</li>
          <ButtonStore value={a}/> //That's my button where i tried to pass the value
          </ul>
          </div>   
          <div className="columns">
          <ul className="price">
          <li className="header"></li>
          <li className="grey">$ {val.Price2}</li>
          <li>{val.Point2}</li>
          <ButtonStore/>
          </ul>
          </div>
          <div className="columns">
          <ul className="price">
          <li className="header"></li>
          <li className="grey">$ {val.Price3}</li>
          <li>{val.Point3}</li>
          <ButtonStore value={val.Price3}/>
          </ul>
          </div>
          <div className="columns">
          <ul className="price">
          <li className="header"></li>
          <li className="grey">$ {val.Price4}</li>
          <li>{val.Point4}</li>
          <ButtonStore/>
          </ul>
          </div>
          <div className="columns">
          <ul className="price">
          <li className="header"></li>
          <li className="grey">$ {val.Price5}</li>
          <li>{val.Point5}</li>
          <ButtonStore/>
          </ul>
          </div>
          <div className="columns">
          <ul className="price">
          <li className="header"></li>
          <li className="grey">$ {val.Price6}</li>
          <li>{val.Point6}</li>
          <ButtonStore/>
          </ul>
          </div>
          </div>
          )})}
      </HeroItems>
    </HeroContent>
    <div className="Paypalinv">
        <div ref={paypal}></div>
    </div>
</HeroContainer>
</>
)}
export default Store

So how can i pass the value of my price to the button and then into the amount of paypal? thanks!!