update state with another state in functional component

I have a state which needs to be updated everytime when another state changes.So I used used effect with dependencty array item of another state but it is causing infinit render. I want to use these variables as states. I want totalAmount to be a state variable for which other varables are needed to be state(discount subtotal etc.). What could be the solution to this.

App.js

import { useState, useEffect } from 'react';
import './styles.css';

function App() {
  let order = [
    {
      qty: 2,
      name: 'Margarita A',
      variant: 'crab & cucumber',
      price: '412.00',
    }
  ];


  let [discount, setDiscount] = useState(759.5),
    [deliveryFee, setDeliveryFee] = useState(12.0),
    [taxes, setTaxes] = useState(46.15),
    [subtotal, setSubtotal] = useState(0),
    [totalAmount, setTotalAmount] = useState(0);
  useEffect(() => {
    setTotalAmount(subtotal - discount + deliveryFee + taxes);
  }, [subtotal, discount, deliveryFee, taxes]);

  return (
    <div className="app">
      <div className="container">    
          <div className="orderItems">
            {order.map((item, i) => {
              // subtotal += +item.price;
              setSubtotal((prev) => prev + +item.price);

              return (
                <div className="orderItem" key={i}>
                  <span className="orderItemPrice">₹{item.price}</span>
                </div>
              );
            })}
          </div>
        </div>

        <div className="summary">
          <span className="summaryTitle">Summary</span>
          <div className="total amountBox">
            <span>Total</span>
            <span>₹ {totalAmount}</span>
          </div>
        </div>
      </div>
      <div className="placeOrder">
        <button onClick={(e, totalAmount) => {}}>PLACE ORDER</button>
      </div>
    </div>
  );
}

export default App;