I’m building a React Native app with a custom dropdown component. The component uses a FlatList to display a list of items, and each item can be expanded to show more details when pressed. I’m managing the expanded state using useState, but when I press on one of the Pressable elements, all items except the one I selected are expanded.

Here’s the code for my CustomDropdown component:

import { createContext, useContext, useState } from "react";
import { Text, View, StyleSheet, FlatList, Pressable } from "react-native";
import FontAwesome from '@expo/vector-icons/FontAwesome';

export default function CustomDropdown(props: any) {
    const { channels, friends, groups, services, setChannels, setFriends, setGroups, setServices } = props

    const [ isExpanded , setIsExpanded] = useState(null)

    const toggleState = (key) => {            
        switch (key.toLowerCase()) {
          case 'channels':
            setChannels((prev: any)=>!prev)
            setIsExpanded(channels)
            break;
          case 'friends':
            setFriends((prev: any)=>!prev)
            setIsExpanded(friends)
            break
          case 'groups':
            setGroups((prev: any)=>!prev)
            setIsExpanded(groups)
            break
          case 'services':
            setServices((prev: any)=>!prev)
            setIsExpanded(services)
            break
          default:
            break;
        }
      }

    return( 
        <View style={styles.dropDown}>
              <FlatList 
                  data={[
                  {key: 'Channels', state: channels, value: 'channel'},
                  {key: 'Friends', state: friends, value: 'friend'},
                  {key: 'Groups', state: groups, value: 'group',},
                  {key: 'Services', state: services,  value: 'service'},
                  ]}
                  renderItem={({item}) => 
                  <View>
                    <Pressable onPress={() => toggleState(item.key)} style={styles.flatList}>
                      <Text style={styles.flatListItem}>{item.key}</Text>
                      <FontAwesome size={20} name={ item.state ? "caret-down" :"caret-left"} style={{color: '#626262'}} />
                  </Pressable>
                  {
                    isExpanded == item.state ?
                    <View>
                      <Text>{item.value}</Text>
                    </View>
                    : null
                  }
                  </View>
                }
                />
            </View>
    )
}

I suspect the issue might be with how I’m managing the isExpanded state. How can I modify my code so that only the selected item is expanded, and the others are collapsed?

I attempted to use the item.key.toLowerCase() instead of using the item.state which should set isExpanded to equal my state value but doing this stopped dropdown feature for working at all.