Рендеринг запускается дважды

Question

У меня есть список стран, в которых я хотел бы показать некоторую информацию, связанную со страной. Я запускаю al oop, чтобы показать информацию для каждой страны. Я создал компонент для страны.

const CountryCard = ({ info }) => {
  const { country, infoForLastDate, path } = info
  return (
    <Card >
      <CardContent>
        <Typography variant="h5" component="h2" >
          {country.name}
        </Typography>
        <Flag oneToOne={country.oneToOne} fourToThree={country.fourToThree} />
        <Typography variant="body2" >
          Confirmed: {infoForLastDate.confirmed}
        </Typography>
        <Typography variant="body2" component="p">
          Recovered: {infoForLastDate.recovered}
        </Typography>
        <Typography variant="body2" component="p">
        Deaths: {infoForLastDate.deaths}
        </Typography>
      </CardContent>
      <CardActions>
        <Link href={path}>
          See more
        </Link>
      </CardActions>
    </Card>
  )
}

export default CountryCard

Кроме того, я создал еще один компонент для отображения флага, связанного со страной.

import React from 'react'
import { imageUrlFor } from '../lib/image-url'

const Flag = ({ oneToOne, fourToThree }) => {
  const  url = imageUrlFor(oneToOne.asset._id)

  return (
    <img src={url} />
  )
}

export default Flag

Я получаю сообщение об ошибке TypeError: oneToOne is null

Я не знаю, почему флаги отрисовываются дважды. когда я отлаживаю, свойство oneToOne в первый раз имеет значение, но в конце запускается снова и имеет значение null

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

Редактировать: Добавить компонент CountryList:

const CountryList = ({list}) => {
  return (
    <Grid container spacing={3}>
      { list.length > 1 && list.map(country => {
        const countryWithPath = {
          ...country,
          path: `/country/${country.country.name.toLowerCase().replace(' ', '-').replace('*', '')}`
        }
        return (
          <Grid item xs={12} sm={6} key={country._id} >
            <CountryCard info={countryWithPath} />
          </Grid>)
      })
      }
    </Grid>
  )
}

export default CountryList