Cannot read property 'map' of undefined on useEffect hook - reactjs

Question

I recently started learning react and I got stuck in the above-mentioned error. I know there are plenty of answers to this error. yes, I have seen those solutions but I am not able to map those solutions to my problems. I am pasting my code below please tell me what is wrong with the below code. any help is very much appreciated. thank you.
const orders = () => {
const [stateValue, setState] = useState({
orders: [],
loading: true
});
// getting the orders
useEffect(() => {
axiosInstance.get('/orders.json').then(res => {
transformData(res);
setState({loading: false});
}).catch(err => {
console.log(err)
setState({loading: false});
})
}, []);
// transforming firebase response(objects of objects) into array of objects
const transformData = (response) => {
const ordersData = [];
if(response.data) {
for (let key in response.data) {
ordersData.push({
...response.data[key],
id: key
})
}
}
setState({orders: ordersData});
}
let orders;
orders = stateValue.orders.map((order) => <Order //error line
key={order.id}
ingredients={order.ingredients}
email={order.email}
price={order.price}
/>);
if(stateValue.loading) {
orders = <Loading />
}
return(
<div>
{orders}
</div>
)
}

Answer 1

The setter function of useState hook DOES NOT MERGE STATE like in its class equivalent (it mentioned in the docs):
However, unlike this.setState in a class, updating a state variable always replaces it instead of merging it.
// Merge with prev state in function component
setState(prev => ({...prev, loading: false}))
// In class component, the setter merges state by default
this.setState({loading: false});