Render Error: undefined is not an object (evaluating 'data[0]')

so i have a problem that this undefined object data[0] but when i check the data, there is 5 type of array 0-4 i want to call the 0 and 1 because each of them have different data

the Code:

RenderDesc:

const RenderDesc = () => (
<Div mx={widthPercentageToDP(5)}>
    {data[0]?.data.length > 0 ? (
      <>
        <Text
          fontWeight="bold"
          fontSize={hp(2)}
          mt={hp(2)}
          allowFontScaling={false}
        >
          Ranking
        </Text>
        <Div alignItems="center" justifyContent="center">
        <FlatList horizontal data={data[0]?.data} renderItem={({item}) => (
          <Div mx={5} borderWidth={1} rounded={10} borderColor={COLOR_PRIMARY}  p={5} mt={10}>
            <Text
              textAlign="center"
              mt={hp(1)}
              color="#EBD200"
              fontWeight="bold"
              fontSize={20}
              allowFontScaling={false}
            >
              {item?.rank}
            </Text>
            <Text
              textAlign="center"
              mt={hp(1)}
              mb={hp(1)}
              w={wp(24)}
              color="#979797"
              fontSize={10}
              allowFontScaling={false}
            >
            {item?.source}
            </Text>
          </Div>
        )}/>
        </Div>
      </>
      ): null}
      <Text
          fontWeight="bold"
          mt={hp(5)}
          fontSize={hp(2)}
          allowFontScaling={false}
        >
          Deskripsi
      </Text>
      <WYSIWYG body={data[1]?.data} />
</Div>

);

Solved Code:

const RenderDesc = () => (
<Div mx={widthPercentageToDP(5)}>
    {data && data[0]?.data.length > 0 ? (
      <>
        <Text
          fontWeight="bold"
          fontSize={hp(2)}
          mt={hp(2)}
          allowFontScaling={false}
        >
          Ranking
        </Text>
        <Div alignItems="center" justifyContent="center">
        <FlatList horizontal data={data[0]?.data} renderItem={({item}) => (
          <Div mx={5} borderWidth={1} rounded={10} borderColor={COLOR_PRIMARY}  p={5} mt={10}>
            <Text
              textAlign="center"
              mt={hp(1)}
              color="#EBD200"
              fontWeight="bold"
              fontSize={20}
              allowFontScaling={false}
            >
              {item?.rank}
            </Text>
            <Text
              textAlign="center"
              mt={hp(1)}
              mb={hp(1)}
              w={wp(24)}
              color="#979797"
              fontSize={10}
              allowFontScaling={false}
            >
            {item?.source}
            </Text>
          </Div>
        )}/>
        </Div>
      </>
      ): null}
      <Text
          fontWeight="bold"
          mt={hp(5)}
          fontSize={hp(2)}
          allowFontScaling={false}
        >
          Deskripsi
      </Text>
      <WYSIWYG body={data && data[1]?.data} />
</Div>

);

for some reason the code work again by adding ( data && ) because of the render problem by doing this my code work again and if this help you that will be great