React-Native Flatlist all Flatlist Rerender on one Item Selection

Question

I'm building a React-Native app and trying to optimize it, i runned into the case of my Flatlist.

So this Flatlist basically renders few elements and each of these elements are selectable. The issue i'm facing is that selecting one single item rerenders the whole Flatlist, and thus all items it contains.

I've seen a lot of solutions online already, and tried them without any success.

Here is my code :

Class component containing the Flatlist

const keyExtractor = (item) => item.id

export default class OrderedList extends Component {

    state = {
        selected: null,
    }

     onPressSelect = (id) => {
         console.log(this.state.selected)
         if(this.state.selected === id) {
             this.setState({ selected: null})
         } 
         else {
             this.setState({ selected: id})
         }
     }


    renderItemOrdered = ({item}) => {

        const { group, wording, description, id: uniqueID } = item
        const { id, name } = group

        return (
            <CategoryCard
            type="ordered"
            // item={item}
            uniqueID={uniqueID}
            groupName={name} 
            groupID={id} 
            description={description} 
            title={wording}
            selected={this.state.selected}
            onPressSelect={() => this.onPressSelect(item.id)}
            />
        )
    }

    render() {
    return (
        <FlatList 
        initialNumToRender={10}
        maxToRenderPerBatch={10}
        data={this.props.data}
        renderItem={this.renderItemOrdered}
        keyExtractor={keyExtractor}
        extraData={this.state.selected} ---> Tried with and without it
        />
      )
    }

}

Class component containing the renderItem method

export default class CategoryCard extends Component {

    shouldComponentUpdate = (nextProps, nextState) => {
      return nextProps.selected !== this.props.selected &&
        nextProps.onPressSelect !== this.props.onPressSelect
    }


render(){
    if(this.props.type === 'ordered') {
      return (
        <Pressable style={this.props.selected === this.props.uniqueID ? styles.cardContainerSelected : styles.cardContainer} onPressIn={this.props.onPressSelect}>

          <View style={[styles.cardHeader, backgroundTitleColor(this.props.groupID)]}>
              <Text style={[styles.cardGroupName, textTitleColor(this.props.groupID)]}>{this.props.groupName}</Text>
          </View>


          <View style={styles.cardContent}>
              <Text style={styles.cardTitle}>{this.props.wording}</Text>
              <Text style={styles.cardDescription} numberOfLines={3} ellipsizeMode="tail">{this.props.description}</Text>
          </View>

        </Pressable>
      )
    }
}

}

What i already tried :

At first my components were functional components so i changed them into class components in order to make things works. Before that, i tried to use React.memo, also to manually add a function areEqual to it, to tell it when it should rerender, depending on props. It didn't give me what i wanted. I also tried to put all anonymous functions outside return statements, made use of useCallback, played around the ShouldComponentUpdate (like adding and removing all the props, the onPress prop, selected props)... None of that worked.

I must be missing something somewhere.. If you can help me with it, it would be a big help !