I want render a card with the second background for both cards if one card has a title > 14 and subtitle > 24. Now it works if the second card changes, but the first is not triggered.

Into the Card component, I am trying to check a length in useEffect and change the state. How is it possible to rework?

Data:

import greenBackground from '@/assets/images/backgrounds/greenBackground.png';
import ligthGreenBackground from '@/assets/images/backgrounds/ligthGreenBackground.png';
import blueBackground from '@/assets/images/backgrounds/blueBackground.png';
import lightBlueBackground from '@/assets/images/backgrounds/lightBlueBackground.png';
import { useTranslation } from 'react-i18next';
const { t } = useTranslation();

const data = useMemo(
  () =>
  ([{
      title: t('partner-title'),
      subTitle: t('partner-subtitle'),
      background: [greenBackground, ligthGreenBackground],
    },
    {
      title: t('subscription.title'),
      subTitle: t('subscription.subtitle'),
      background: [blueBackground, lightBlueBackground],
    },
  ]), [t]);

Card:

const Card = ({background,isChangeBackgound,setIsChangeBackgound,title,subTitle}) => {

  useEffect(() => {
    setIsChangeBackgound(false);
    
    if (title.length > 14 || subTitle?.length > 24) {
      setIsChangeBackgound(true);
    }
  }, [isChangeBackgound]);

  return (
   <ImageBackground style={{width: isChangeBackgound ? 280 : 190 }} source={background}>
     <Text>{title}</Text>
     <Text>{subTitle}</Text>
   </ImageBackground>
  );
};

Component where render card:

const Home = ({ data }) => {
  const [isChangeBackgound, setIsChangeBackgound] = useState(false);

  const renderItem = useCallback(
    ({ item, index }) => {
      return (
        <Card
          background={isChangeBackgound ? item?.background[1] : item?.background[0]}
          isChangeBackgound={isChangeBackgound}
          setIsChangeBackgound={setIsChangeBackgound}
          subTitle={item.subTitle}
          title={item.title}
        />
      );
    },
    [isChangeBackgound]
  );

  const extractKey = useCallback(item => item.title, []);

  return (
      <FlatList
        data={data}
        horizontal
        ItemSeparatorComponent={() => <View style={{ marginRight: 6 }} />}
        keyExtractor={extractKey}
        renderItem={renderItem}
      />
  );
};