Changing style of a component with each swipe of Swiper Library

Currently I have a swiper component that holds my main images and below that I have a thumbnail gallery for each of those images with a borderWidth:1. What I want is that only the border for the current slide should be active while the others show no borderWidth.

App.js

  export default function App() { 
  
  const [activeBorder, setActiveBorder] = useState();
        const [activeIndex, setActiveIndex] = useState();
        const fishMapping = ["Fish Azure", "Fish Salmon", "Fish Another"];
        const onIndexChanged = (index) => setActiveIndex(index);

  return (
    <View style={{ flex: 1 }}>
      <ImageBackground
        style={globalStyles.backgroundImage}
        source={require('./resource/images/bg1080.jpeg')}
      >
      <Fish onIndexChanged={onIndexChanged}/>
      <BottomImages />
      { activeIndex && <Text>`Fish` ${fishMapping[activeIndex]}</Text> }
      </ImageBackground>
    </View>
  );
}

BottomImages.js

export default class BottomImages extends Component { 

state = {
    columns: 3,
  };

  render() {
    const { columns } = this.state;
    return (
      <View style={styles.container}>
        <FlatList
          numColumns={columns}
          data={[
            require('../resource/images/AzureDamsel.png'),
            require('../resource/images/BicolourAngelfish.png'),
            require('../resource/images/ClownTriggerfish.png'),
          ]}
          renderItem={({ item }) => {
            return (
              <ListItem
                itemWidth={(ITEM_WIDTH - 10 * columns) / columns}
                image={item}
              />
            );
          }}
          keyExtractor={(index) => {
            return index;
          }}
        />
      </View>
    );
  }
}

ListItem.js which holds my thumbnail images as well as the borderbox for the images:

 const ListItem = (props) => {  

  const { itemWidth } = props;

  return (
    <TouchableWithoutFeedback>
      <Animated.View
        style={{
          margin: 5,
        }}>
        <Image
          style={{
            width: itemWidth,
            height: 50,
            borderWidth: 1,
            borderColor: '#000',
          }}
          source={props.image}></Image>
      </Animated.View>
    </TouchableWithoutFeedback>
  );
};

Fish.js:


<Swiper style={styles.wrapper} height={10} horizontal={true} >
      <View style={styles.slide1}>
        <Image
          resizeMode="stretch"
          style={styles.image}
          source={require('../resource/images/AzureDamsel.png')}
        />
      </View>
      <View style={styles.slide2}>
        <Image
          resizeMode="stretch"
          style={styles.image}
          source={require('../resource/images/BicolourAngelfish.png')}
        />
      </View>
      <View style={styles.slide3}>
        <Image
          resizeMode="stretch"
          style={styles.image}
          source={require('../resource/images/ClownTriggerfish.png')}
        />
      </View>
 </Swiper> 

I have attached my sandbox for better reference: https://snack.expo.dev/@jay_m/paranoid-carrot

Start by reproducing the linked Expo Snack, then trace the active index from Fish.js through App.js to the thumbnail rendering in BottomImages.js and ListItem.js. Define the expected interaction between the swiper and thumbnails, and consider the work complete when only the thumbnail for the current slide has the active border.