App keeps fetching firebase data with button click [ReactJs] (CLOSED) - reactjs

Question

I have an online restaurant app that fetches the menu items from firebase. It fetches everytime I add something to the cart, which makes the menu items disappear and then reappear for a second. It also scrolls back to the top of the page after every click. How do I prevent this reload? e.preventDefault() doesnt work. Is it due to the passing of data from the child to the parent? I'm not sure.
//imports
import React, { useState, useEffect } from "react";
const Menue = (props) => {
const [cartLength, setCartLength] = useState(0);
const [indischeGerichte, setIndischeGerichte] = useState([])
useEffect(() => {
fire.firestore().collection("Indische Gerichte")
.orderBy("id", "asc")
.get()
.then(snapshot => {
var ind = []
snapshot.forEach(doc => {
ind.push(doc.data())
})
setIndischeGerichte(ind)
}).catch(error => {
console.log(error)
});
}, [])
function addToCart(e, item) {
e.preventDefault();
var updatedCart = { ...props.cart };
if (!updatedCart[item.title]) {
updatedCart[item.title] = [1, item.price];
} else {
updatedCart[item.title][0]++;
}
setCartLength(cartLength + 1);
props.setTheCart(updatedCart, cartLength);
}
return (
<div>
<Typography variant="h3" component="h2" gutterBottom>
Speisekarte
</Typography>
<div id="ind">
<Typography variant="h4">Indian Foods:</Typography>
{indischeGerichte.map((indFood, idx) => {
return (
<div key={idx}>
<Card className="foodCard">
<Typography variant="h4">{indFood.title}</Typography>
<Button
variant="contained"
color="secondary"
onClick={(e) => addToCart(e, indFood)}
>
1x In den Einkaufswagen
</Button>
</Card>
</div>
);
})}
</div>
</div>
);
};
export default Menue;