Change background of TouchableOpacity with ternary not working properly

[medinalautaro354]

Hi everyone, thanks for read this question.
I have a flashlist of 1000 icons and when i press the button icon i need change the background color this is my code.
when I press the button to change color it doesn't do it but if I scroll down and back up, the selected button changes color.
why is this happening?

 <FlashList
            data={IonIcons}
            numColumns={4}
            keyExtractor={icon => icon.name}
            estimatedItemSize={100}
            renderItem={({item, index}) => (
              <IconButton
                style={[
                  styles.iconButton,
                  {backgroundColor: indexButtonSelected == index ? 'red' : 'white'},
                ]}
                iconSize={'xl'}
                iconName={item.name}
                onPress={() => {
                  setIconName(item.name);
                  setIndexButtonSelected(index);
                }}
              />
            )}
          />

gif

[medinalautaro354]

Please close the post, I found the solution. i add extraData prop. extraData={indexButtonSelected}.