I need to be able to track the amount to be able to provide a gross total and send it to the schema

using mongoose and nextjs i seem to be able to display the total amounts just find but tracking/calling them for a gross total is proving difficult because i can't call the value

Here's the component i'm using

export default function CartInput(props: CartInputProps) {
  const [quantity, setQuantity] = useState<number>(1);

  const handleQuantityChange = (changeType: 'increment' | 'decrement') => {
    if (changeType === 'increment') {
      setQuantity((prevState) => prevState + 1);
    } else {
      if (quantity === 1) {
        return;
      } else {
        setQuantity((prevState) => prevState - 1);
      }
    }
  };

  let amount = quantity * props.price;

  return (
    <div className='w-full'>
      <div className='grid grid-cols-2'>
        <div>{props.product}</div>

        <div>{props.price}</div>

        {amount}
      </div>

      <button
        onClick={() => handleQuantityChange('decrement')}
        className='btn btn-primary'
      >
        Clicky
      </button>

      <input
        type='number'
        className='bg-red-500'
        value={quantity.toString()}
        min={1}
      />

      <button
        onClick={() => handleQuantityChange('increment')}
        className='btn btn-primary'
      >
        Clacky
      </button>
    </div>
  );
}

and here is how i'm able to call it on the client side

{
  carts.map(
    (cart: { _id: Key | null | undefined; title: string; price: number }) => (
      <div key={cart._id}>
        <CartInput product={cart.title} price={cart.price} />
      </div>
    )
  );
}