title: RN: if one of the prop title lengths is more then, render another background
body: <p>I want render a card with the second background for both cards if one card has a title &gt; 14 and subtitle &gt; 24. Now it works if the second card changes, but the first is not triggered.</p>
  <p>Into the Card component, I am trying to check a length in useEffect and change the state. How is it possible to rework?</p>
  <p><strong>Data:</strong></p>
  <pre><code>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(
    () =&gt;
    ([{
        title: t('partner-title'),
        subTitle: t('partner-subtitle'),
        background: [greenBackground, ligthGreenBackground],
      },
      {
        title: t('subscription.title'),
        subTitle: t('subscription.subtitle'),
        background: [blueBackground, lightBlueBackground],
      },
    ]), [t]);
  </code></pre>
  <p><strong>Card:</strong></p>
  <pre><code>const Card = ({background,isChangeBackgound,setIsChangeBackgound,title,subTitle}) =&gt; {
  
    useEffect(() =&gt; {
      setIsChangeBackgound(false);
      
      if (title.length &gt; 14 || subTitle?.length &gt; 24) {
        setIsChangeBackgound(true);
      }
    }, [isChangeBackgound]);
  
    return (
     &lt;ImageBackground style={{width: isChangeBackgound ? 280 : 190 }} source={background}&gt;
       &lt;Text&gt;{title}&lt;/Text&gt;
       &lt;Text&gt;{subTitle}&lt;/Text&gt;
     &lt;/ImageBackground&gt;
    );
  };
  </code></pre>
  <p><strong>Component where render card:</strong></p>
  <pre><code>const Home = ({ data }) =&gt; {
    const [isChangeBackgound, setIsChangeBackgound] = useState(false);
  
    const renderItem = useCallback(
      ({ item, index }) =&gt; {
        return (
          &lt;Card
            background={isChangeBackgound ? item?.background[1] : item?.background[0]}
            isChangeBackgound={isChangeBackgound}
            setIsChangeBackgound={setIsChangeBackgound}
            subTitle={item.subTitle}
            title={item.title}
          /&gt;
        );
      },
      [isChangeBackgound]
    );
  
    const extractKey = useCallback(item =&gt; item.title, []);
  
    return (
        &lt;FlatList
          data={data}
          horizontal
          ItemSeparatorComponent={() =&gt; &lt;View style={{ marginRight: 6 }} /&gt;}
          keyExtractor={extractKey}
          renderItem={renderItem}
        /&gt;
    );
  };
  </code></pre>