PayPal Checkout in ReactJs (adding different payment options)

Question

I'm working on implementing PayPal Checkout into my ReactJs project. I'm using the npm package for react-paypal (https://www.npmjs.com/package/@paypal/react-paypal-js) but I've been unable to add additional price options. I need my dropdown options menu to connect to the PayPal checkout popup summary. The goal is to display the correct amount that the user selects in the dropdown menu to display on the PayPal checkout popup window when they click the button. I have the Paypal button displaying but it's only displaying the hard-coded "$2" that I have added for testing (I have included a couple pics). Appreciate any advice on how to add this feature.

import { useEffect } from "react";
import { PayPalScriptProvider, 
PayPalButtons,usePayPalScriptReducer } from "@paypal/react- 
paypal-js";


// This values are the props in the UI
const amount = 2;
const currency = "USD";
const style = {"layout":"vertical"};

const ButtonWrapper = ({ currency, showSpinner }) => {
    const [{ options, isPending }, dispatch] = 
usePayPalScriptReducer();

    useEffect(() => {
        dispatch({
            type: "resetOptions",
            value: {
                ...options,
                currency: currency,
            },
        });
    }, [currency, showSpinner]);


    return (<>
            { (showSpinner && isPending) && <div 
              className="spinner" /> }

          
            
            <PayPalButtons
                style={style}
                disabled={false}
                forceReRender={[amount, currency, style]}
                fundingSource={undefined}
                createOrder={(data, actions) => {
                    return actions.order
                        .create({
                            purchase_units: [
                                {
                                    amount: {
                                        currency_code: currency,
                                        value: amount,
                                    },
                                },
                            ],
                        })
                        .then((orderId) => {
                            return orderId;
                        });
                }}
                onApprove={function (data, actions) {
                    return actions.order.capture().then(function(){
                        alert("You have completed the transaction")
                    });
                }}
            />
            
        </>
    );
}

export default function Payments() {
    return (
        
        <div style={{ maxWidth: "750px", minHeight: "200px" }}>
            
            <PayPalScriptProvider
                options={{
                    'client-id': process.env.NEXT_PUBLIC_CLIENT_ID,
                    "disable-funding": "paylater",
                    components: "buttons",
                    currency: "USD"
                }
            
            }
            >
                <ButtonWrapper
                    currency={currency}
                    showSpinner={false}
                />
                
            </PayPalScriptProvider>
        </div>
    );
}