Dynamic Price and Quantity

import { useState } from 'react';
import { CrossmintProvider, CrossmintHostedCheckout } from "@crossmint/client-sdk-react-ui";

function App() {
    const [mintAmount, setMintAmount] = useState(1);
    const nftCost = 0.001;
    const apiClientId = '_YOUR_API_CLIENT_ID_';
    const collectionId = '_YOUR_COLLECTION_ID_';

    const handleDecrement = () => {
        if (mintAmount <= 1) return;
        setMintAmount(mintAmount - 1);
    }

    const handleIncrement = () => {
        if (mintAmount >= 3) return;
        setMintAmount(mintAmount + 1);
    }

    return (
        <CrossmintProvider apiKey={apiClientId}>
            <>
                <button onClick={handleDecrement}> - </button>
                <input
                    readOnly
                    type="number"
                    value={mintAmount}
                />
                <button onClick={handleIncrement}> + </button>
                <CrossmintHostedCheckout
                    lineItems={
                        {
                            collectionId: collectionId,
                            callData: {
                                totalPrice: (nftCost * mintAmount).toString(),
                                _quantity: mintAmount // the `_quantity` property should match what is in your mint function
                                // your custom minting arguments...
                            }
                        }
                    }
                />
            </>
        </CrossmintProvider>
    );
}

export default App;