Передача данных в пропсы react компонента

import React, { useEffect, useState } from 'react'
import Card from 'src/components/Card/Card'
import { useCardsInfoQuery, useCardsQuery } from 'src/__generated__/graphql'
import { CanvasBody } from './Canvas.styles'

interface ICanvas {
  date: string
}

const Canvas: React.FC<ICanvas> = ({ date }) => {
  const [cards, setCards] = useState([])
  const [cardsInfo, setCardsInfo] = useState([])
  const { data, loading, error } = useCardsInfoQuery({
    variables: {
      date: date ? date : new Date().toLocaleDateString(),
    },
  })
  const getCards = useCardsQuery()

  useEffect(() => {
    if (data) {
      setCardsInfo(data.cardsInfo)
      console.log('получили информацию карточек')
      console.log(data.cardsInfo)
    }
  }, [data])

  useEffect(() => {
    if (getCards.data) {
      setCards(getCards.data.cards)
      console.log('получили карточки')
      console.log(getCards.data.cards)
    }
  }, [getCards, cardsInfo])

  return (
    <CanvasBody>
      {loading ? (
        <div>loading</div>
      ) : (
        cards.map((item, index) => {
console.log(cardsInfo[index])
          return (
            <Card
              name={item.name}
              id={item.id}
              order={item.order}
              key={index}
              date={date}
              text={cardsInfo[index] ? cardsInfo[index].text : ''}
              value={cardsInfo[index] ? cardsInfo[index].value : 0}
            ></Card>
          )
        })
      )}
    </CanvasBody>
  )
}

export default Canvas

Получаю карточки:

const getCards = useCardsQuery()

Получаю информацию для карточек:

const { data, loading, error } = useCardsInfoQuery({
    variables: {
      date: date ? date : new Date().toLocaleDateString(),
    },
  })

Перебираю карточки и рендерю компоненты Card, передавая в них данные с информацией из CardsInfo

        cards.map((item, index) => {
          console.log(cardsInfo[index])
          return (
            <Card
              name={item.name}
              id={item.id}
              order={item.order}
              key={index}
              date={date}
              text={cardsInfo[index] ? cardsInfo[index].text : ''}
              value={cardsInfo[index] ? cardsInfo[index].value : 0}
            ></Card>
          )
        })

Проблема в том, что при перезагрузке страницы примерно в 1 из 4 случаев Card рендерится без данных из cardsInfo. То есть подставляются text и value ' ' и 0 соответственно

              text={cardsInfo[index] ? cardsInfo[index].text : ''}
              value={cardsInfo[index] ? cardsInfo[index].value : 0}

Почему так происходит?