Problem Definition

I am having React App with small shop where all products are coming just from JSON file as external API since I am handling everything on fronten.

But I just got in one product that has limited amount -> I have only 20psc of that product and I am not sure how I can limit the users to purchasing more than I actually have.

Questions

1. Is there a way (simplest possible) how I can limit amount of that product without using database or backend?
2. Is there a way how I can actually show the users how much of that specific product is left? (imagine it as limited edition -> after every purchase number of product left will update live)

Is that somehow possible with still using just API or do I have to revert everything into DB (firebase for example)?

Any suggestions and example links I appriciate!

This is how I currently handle it with unlimited amount of products

// fetch data here

    const fetchData = () => {
            fetch('myAPIendpoint')
                .then((response) => response.json())
                .then((data) => {
                    setProducts(data);
                })
                .catch((error) => {
                    console.log(error);
                });
        };
        React.useEffect(() => {
            fetchData();
        }, []);

// adding product to cart

const onAdd = (product) => {
    const exist = cartItems.find((x) => x.id === product.id);
    if (exist) {
        setCartItems(
            cartItems.map((x) =>
                x.id === product.id ? { ...exist, qty: exist.qty + 1 } : x
            )
        );
    } else {
        setCartItems([...cartItems, { ...product, qty: 1 }]);
    }
};

// mapping items to show it in cart

 {cartItems.map((item) => (
.....
.....