Best way to create as many unique useState as cleanly as possible? - reactjs

Question

I am trying to figure out how to create as many useState as cleanly (keeping DRY principle in mind) as possible.
The problem I am trying to solve is that currently I have a menu list of items and its relative prices. The website lets the customer use a drop down menu to choose how many orders of that item he/she wants.
My question is that I know for one menu item, I can use useState to make something like
const [order, setOrder] = useState({});
where the key-value pair would be name and number of orders
Now my question is: suppose I have N many menu items, how can I create as many const [order, setOrder] = useState({}) as I need? I know I can't put useState in a for-loop so that's out of the question (?)
The below is my code I'm trying to work out:
export default function MenuPage() {
// getting the menu items and prices from firebase
const [menuItems, setMenuItems] = useState({});
React.useEffect(async () => {
const result = await querySnapShot();
result.forEach((doc) => {
setMenuItems(doc.data());
})
}, []);
return(
{
Object.keys(menuItems).map((key) => {
return (
<Box
key={key}
display='flex'
flexDirection='row'
alignItems='center'
justifyContent='center'
textAlign='center'
borderBottom='0.5px solid black'
sx={{ my: 10, mx: 10 }}>
<Box flex={1} textAlign='center' sx={{ fontSize: '35px', }}>
{key}:
</Box>
<br />
<Box flex={1} textAlign='center' sx={{ fontSize: '25px' }}>
${menuItems[key]}0
</Box>
<Box flex={1} display='flex' flexDirection='row' alignItems='center' justifyContent='end' sx={{ width: '50px' }}>
{/* <Typography flex={0} sx={{ mr: 5, fontFamily: 'Poppins', fontSize: '25px' }}>Order: </Typography> */}
<Box flex={0.5} textAlign='center'>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Order</InputLabel>
<Select
value={order}
name={key}
label="Order"
onChange={handleChange}>
<MenuItem value={1}>1</MenuItem>
<MenuItem value={2}>2</MenuItem>
<MenuItem value={3}>3</MenuItem>
</Select>
</FormControl>
</Box>
</Box>
</Box>
);
})
}
);
}

Answer 1

Supposing that you have an array as response you can:
const data = [
{ name: 'Foo', value: 'bar' },
{ name: 'Foo2', value: 'bar2' },
];
setState(data.map({ name: 'Foo', value: 'bar' }));
// or if no change has to be done you can set it directly into the state
setState(data);