React Native - выделенный элемент FlatList не остается выделенным

Question

Я пытаюсь создать FlatList, который позволяет мне выделять любой вариант, который мне нужен. Идея в том, что позже я создам функциональность, которая передаст этот элемент в новый список. На данный момент я просто пытаюсь понять, как изменить цвет предмета при фокусировке. В настоящее время я понял, что выбранный мной элемент на короткое время меняет цвет границы (что я здесь тестирую), но только когда я нажимаю на SearchBar и набираю букву. Затем, кажется, что когда срабатывает функция debounce, она меняет цвет границы обратно. Я благодарен всем за отзывы!

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
import { SearchBar } from 'react-native-elements';
import Exercises from './../data/ExercisesList'

const useDebounce = (value, delay) => {
  const [debounceValue, setDebounceValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebounceValue(value);
    }, delay);

    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);

  return debounceValue;
};

// Get the values of the exercises and sort alphabetically
const exerciseList = Object.values(Exercises)
  .map(exercise => ({
    ...exercise,
    lowerCaseName: exercise.title.toLowerCase(),
  }))
  .sort((a, b) => a.title - b.title);

const SearchableFlatList = () => {
  const [query, setQuery] = useState('');
  const debounceQuery = useDebounce(query, 300);
  const [filteredExerciseList, setFilteredExerciseList] = useState(exerciseList);


  useEffect(() => {
    const lowerCaseQuery = debounceQuery.toLowerCase();
    const newExercise = exerciseList
      .filter((exercise) => exercise.lowerCaseName.includes(lowerCaseQuery))
      .map((exercise) => ({
        ...exercise,
        rank: exercise.lowerCaseName.indexOf(lowerCaseQuery),
      }))
      .sort((a, b) => a.rank - b.rank);

      setFilteredExerciseList(newExercise);
  }, [debounceQuery]);

  const renderItem = ({ item }) => {
    const styleSelect =  item.isSelect ? styles.selected : styles.title

    return (
        <TouchableOpacity
            onPress={() => item.isSelect = !item.isSelect}
        >
            <Text style={styleSelect}>{item.title}</Text>
        </TouchableOpacity>
    )
  }
  

  return (
    <View style={styles.listContainer}>
      <SearchBar
        placeholder="Choose an Exercise..."
        onChangeText={setQuery}
        value={query}
        containerStyle={styles.chooseExercise}
        inputContainerStyle={styles.inputContainer}
        inputStyle={styles.input}
      />
      <FlatList
        keyExtractor={(item, index) => `${index}`}
        data={filteredExerciseList}
        renderItem={renderItem}
        style={styles.listContainer}
        extraData={exerciseList}
      />
    </View>
  );
};

const styles = StyleSheet.create({
    chooseExercise: {
        height: 50,
        width: 300,
        borderColor: 'black',
        borderWidth: 2,
        borderRadius: 5,
        justifyContent: 'center',
        marginTop: 10,
        marginBottom: 10,
        fontSize: 25,
        color: 'white'
    },
    inputContainer: {
        backgroundColor: 'rgba(59, 61, 60, .9)'
        
    },
    input: {
        color: 'white',
        fontSize: 25
    },
    title: {
        fontSize: 25,
        color: 'white',
        margin: 1,
        borderWidth: 1,
        borderColor: 'white',
        width: 300,
        padding: 10
    },
    selected: {
        fontSize: 25,
        color: 'white',
        margin: 1,
        borderWidth: 1,
        borderColor: 'red',
        width: 300,
        padding: 10
    },
    listContainer: {
        marginTop: 10,
        height: 500
    },
})

export default SearchableFlatList;