What is the proper way to calculate price given checkboxes and quantity within React?

Customers are selecting restaurant items that have options like toppings. I’m using checkboxes to allow the customer to select what options, with each checkbox having the added price of the option inside of the HTML value attribute.

There is also a quantity component that uses a callback to modify a React state.

(example of checkboxes, and quantity selection)

The code I’ve come up with to handle all of this is as follows:

    const [basePrice, setBasePrice] = useState(0);
    const [price, setPrice] = useState(0);

    useEffect(() => {
        let insert = parseFloat(props.item.price);
        setBasePrice(insert.toFixed(2));
        setPrice(insert.toFixed(2));
        setQuant(1);
    }, [props.item])

    useEffect(() => {
        calcPrice();
    }, [quant])

    const calcPrice = () => {
        let checked = document.querySelectorAll('input:checked');
        let insert = parseFloat(basePrice);

        for (let i of checked) {
            insert += parseFloat(i.value);
        }

        insert *= parseFloat(quant);

        setPrice(insert.toFixed(2));
    }

calcPrice() is also called within the onchange attribute of the div containing all of the checkboxes. Anytime a customer clicks on a checkbox, it calls calcPrice().

the first useEffect() just resets the display price (setPrice(insert.toFixed(2)) and runs every time the user selects a different item.

The problem I’m having is that whenever the customer selects an option, increases the quantity, and then switches to a new item, it doesn’t display the right price. It calls the second useEffect() before let checked = document.querySelectorAll() has a chance to run, and uses the boxes checked from the last item.

price has the $3 from last item

I have spent a full week and a half trying to combine the quantity and checkboxes properly, and–knowing that I am more than likely too stupid to see the obvious solution–am asking for help on this.