i'm coding a MERN delivery app i na basic lvl and need a simple back-end. I'm geting all data from database in front-end part by axios

    const [products, setProducts] = useState([]);
    useEffect(()=>{
    axios.get('api/products')
     .then(res => {
         console.log(res)
         setProducts(res.data)
     })
    .catch(err => {
        console.log(err)
    })

})

also I need to get my product to shoping bucket, but dont understand how to do this. This is code work only in front-ent, but when i get my data from database - this code stop working

 let [cartItems, setCartItems] = useState([])

 const addProduct = (product) => {
 const productExist = cartItems.find(item => item.id === product.id)
 if (productExist) {
    setCartItems(cartItems.map(item => item.id === product.id?
        {...productExist, quantity: productExist.quantity + 1}: item));
 } else {
    setCartItems([...cartItems, {...product, quantity: 1}])
ja }