How can i use useState to manipulate DOM in item in list of array render?

im trying to make checkout page using react, i want to use useState to handle quantity, but useState can’t be declared outside react functional component, i have declared usestate in the component, but it replacing all the checkout item quantity which i dont want, how can i solve this?

Error msg : React Hook “useState” cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.

sorry if my english is bad

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./Checkout.css";

const Checkout = (props) => {
    const [item, setItem] = useState([]);
    // const [cartComplete, setCartComplete] = useState(false);

    useEffect(() => {
        for (let i = 0; i < props.cart.length; i++) {
            axios
                .get(`http://${process.env.REACT_APP_BASE_URL}:3100/user/cart/${props.cart[i]}`)
                .then((res) => {
                    setItem((prevState) => [...prevState, res.data]);
                    // if (i === props.cart.length - 1) {
                    //     setCartComplete(true);
                    // } else {
                    //     setCartComplete(false);
                    // }
                })
                .catch((err) => console.log(err));
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return (
        <div className="checkout-container">
            <h1>Checkout</h1>
            <div className="checkout-items">
                {item.map((item, index) => {
                    let [quantity, setQuantity] = useState(1);

                    return (
                        <div className="checkout-item" key={index}>
                            <div className="checkout-item-img">
                                <img
                                    src={`http://${process.env.REACT_APP_BASE_URL}:3100/${item[0].foto_barang}`}
                                    alt={item[0].nama_barang}
                                />
                            </div>
                            <div className="checkout-item-info">
                                <h3>{item[0].nama_barang}</h3>
                                <p>{item[0].harga_barang}</p>
                                <input
                                    type="number"
                                    name="quantity"
                                    id="quantity"
                                    min="1"
                                    value={quantity}
                                    onChange={(e) => {
                                        setQuantity(e.target.value);
                                    }}
                                    required
                                />
                                <p>Total : Rp. {harga}</p>
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
};

export default Checkout;