In the main dashboard component i do get requests for 5 arrays. When I log them into the console i get the data. When I try to pass down the data to a child component the values get undefined then values then undefined

The dashboard;

const [logdata, setLogData] = useState([])
const [storageData, setStorageData] = useState([])
const [logquotation, setLogQuotation] = useState([])
const [storageQuotation, setStorageQuotation] = useState([])
const [productQuotation, setProductQuotation] = useState([])

const getLogData = () => {
    axios.get("http://localhost:8080/api/logisticsrecords")
    .then(res => {
        setLogData(res.data)
        console.log(res)
    })
    .catch(err => console.log(err))
}

const getStorageData = () => {
    axios.get("http://localhost:8080/api/storageshipment")
    .then(res =>{
        setStorageData(res.data)
    })
    .catch(err => console.log(err))
}

const getLogisticsQuotation = () => {
    axios.get("http://localhost:8080/api/logisticsquotation")
    .then(res =>{
        setLogQuotation(res.data)
    })
    .catch(err => console.log(err))
}

const getStorageQuotation = () => {
    axios.get("http://localhost:8080/api/storagequotation")
    .then(res =>{
        setStorageQuotation(res.data)
    })
    .catch(err => console.log(err))
}

const getProductQuotation = () => {
    axios.get("http://localhost:8080/api/productquotation")
    .then(res =>{
        setProductQuotation(res.data)
    })
    .catch(err => console.log(err))
}


useEffect(() => {
    getLogData()
    getStorageData()
    getLogisticsQuotation()
    getProductQuotation()
    getStorageQuotation()
}, [])
console.log("dashboard data",logdata, storageData, storageQuotation, logquotation)

At this point when i log all the states to the console i get the values as expected. Passing the values as props to the child component

 <DashboardHome 
   storage={storageData} 
   logistics = {logdata}
   storeQuotation = {storageQuotation}
   prodQuotation = {productQuotation}
   logisticsQuotation = {logquotation}
    />

Destructuring the values at the child component

const DashboardHome = ({  storage,  logistics,  storeQuotation, prodQuotation, logisticsQuotation }) => {

console.log("The dashboard logistics/storage",storage, logistics)
console.log("the dashboard [quotation] data", storeQuotation, prodQuotation, logisticsQuotation)

console.log(storage, "storage data")
console.log("variable length is", storage)
return(...)}

What I get at the console