JSX array.map only maps first item - arrays

Question

Nothing is displayed on the initial render, but the console logs show me 3 things:
The runs array contains 3 objects (How it should be)
Both times I use runs.map, it runs through only the first element in runs.
The component's render method runs twice before stopping.
If, after the first render, I make a change to my script and save it, the code executes as it should and everything appears on-screen.
This is how I'm creating my objects and populating the array.
const [runs, setRuns] = useState([])
useEffect(() => {
machineDocIDs.map(item => {
fetchProductData(item)
})
},[machineDocIDs])
function fetchProductData(id) {
const productsCollectionRef = collection(db, "RunSheets", "All Runs", "Open", runID, "machines", id, "products")
const q = query(productsCollectionRef)
const productData = []
const IDs = []
const unsubscribe = onSnapshot(q, (querySnapshot) => {
querySnapshot.forEach((doc) => {
productData.push(doc.data())
IDs.push(doc.id)
})
onCreateRunLocation(machines[machineDocIDs.indexOf(id)].machine_name, productData)
})
return () => unsubscribe()
}
function onCreateRunLocation(machine, productData) {
let tempArray = runs
let loc = {machine_id: machine, products: arrangeProducts(productData)}
tempArray.push(loc)
setRuns(tempArray)
}
function arrangeProducts(productData) {
let temp = []
productData.map((item) => (
temp.push({name: item.flavors, quantity_ordered: item.quantity_ordered})
))
return(temp)
}
And this is all of my code involving the render
function renderProduct(product) {
return (
<>
<tr>
<th>{product.name}</th>
<th>{product.quantity_ordered}</th>
</tr>
</>
)
}
function renderLocation(location) {
console.log(location)
console.log(runs)
runs.map((item) => (
console.log(item)
))
return (
<>
<Card>
<Card.Title>{location.machine_id}</Card.Title>
<Card.Body>
<Table>
<tbody>
{location.products.map(item => (
renderProduct(item)
))}
</tbody>
</Table>
</Card.Body>
</Card>
</>
)
}
return ( /* main function return */
<>
<Container>
{runs.map((item) => {
renderLocation(item)
})}
</Container>
</>
)
Any help is appreciated.

Answer 1

You need to return it:
<Container>
{runs.map((item) => {
return renderLocation(item);
})}
</Container>