title: how to handle the toggle states of a common functions in the collapse menu?
body: <p>I have created a collapse menu and map into the data in render i have also handled the collapse menu which is collapse and expanded as per their specific id. But when i click on the next collapse menu them the previous is close and after click on again the next collpase menu then it will open. I want to write a functionality that when i click on next collapse menu the previous collapse menu is close and next is open at the same time. for example lenskart drawer But i unable to do that</p>
  <p>Here's my code:</p>
  <pre><code>      const SideMenu = (props) =&gt; {
    const {signOut} = useContext(AuthContext);
    const [Routes, setRoutes] = useState([]);
    const [expanded, setCollapse] = useState(false);
    const [colId, setColID] = useState('');
    const [colorId, setColorID] = useState('');
    const [reflink, setRefLink] = useState(false);
  
    useEffect(() =&gt; {
      getData();
    }, []);
  
    const getData = () =&gt; {
      setRoutes(api.getNavigation());
    };
    const toggleExpand = (id) =&gt; {
      setColorID(id);
      setRefLink(true);
      setColID(id);
      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
      setCollapse(!expanded);
    };
  
    const changeColor = (id) =&gt; {
      setColorID(id);
      setRefLink(true);
    };
  
    console.log('expanded', expanded);
    return (
      &lt;StrictMode&gt;
        &lt;ScrollView contentContainerStyle={styles.scroll}&gt;
         
              &lt;View&gt;
                {Routes.map((o, i) =&gt;
                  o.subarr.length &gt; 0 ? (
                    &lt;View&gt;
                      &lt;TouchableOpacity onPress={() =&gt; toggleExpand(o.id)}&gt;
                        &lt;View style={styles.mainContainer}&gt;
                          &lt;View style={[styles.sidebarDesign]}&gt;
                            &lt;View style={styles.barIcon}&gt;
                              &lt;Icon.SimpleLineIcons
                                name={o.icon}
                                size={20}
                                color={
                                  colorId === o.id ? Color.linkColor : Color.gray
                                }
                              /&gt;
                            &lt;/View&gt;
                            &lt;View style={styles.barLabel}&gt;
                              &lt;Text
                                style={[
                                  styles.labelStyle,
                                  colorId === o.id
                                    ? styles.linkText
                                    : styles.normalText,
                                ]}&gt;
                                {o.title.toUpperCase()}
                              &lt;/Text&gt;
                            &lt;/View&gt;
                            &lt;View style={styles.barIcon}&gt;
                              &lt;Icon.SimpleLineIcons
                                name={
                                  colId === o.id
                                    ? expanded
                                      ? 'arrow-up'
                                      : 'arrow-down'
                                    : 'arrow-down'
                                }
                                size={20}
                                color={Color.grayDark}
                              /&gt;
                            &lt;/View&gt;
                          &lt;/View&gt;
                        &lt;/View&gt;
                      &lt;/TouchableOpacity&gt;
  
                      {o.subarr.map((r, j) =&gt; (
                        &lt;View&gt;
                          {colId === o.id
                            ? expanded &amp;&amp; (
                                &lt;TouchableOpacity
                                  onPress={() =&gt; {
                                    props.navigation.navigate(r.label);
                                    changeColor(r.id);
                                  }}&gt;
                                  &lt;View style={[styles.sidebarDesign]}&gt;
                                    &lt;View style={styles.barIcon}&gt;
                                      {/* &lt;Icon.FontAwesome
                              name={r.icon}
                              size={20}
                              color={Color.gray}
                            /&gt; */}
                                    &lt;/View&gt;
                                    &lt;View style={styles.barLabel}&gt;
                                      &lt;Text
                                        style={[
                                          styles.labelStyle,
                                          colorId === r.id
                                            ? styles.linkText
                                            : styles.normalText,
                                        ]}&gt;
                                        {r.label.toUpperCase()}
                                      &lt;/Text&gt;
                                    &lt;/View&gt;
                                    &lt;View style={styles.barIcon}&gt;
                                      {/* &lt;Text&gt;icon&lt;/Text&gt; */}
                                    &lt;/View&gt;
                                  &lt;/View&gt;
                                &lt;/TouchableOpacity&gt;
                              )
                            : null}
                        &lt;/View&gt;
                      ))}
                    &lt;/View&gt;
                  ) : (
                    &lt;View&gt;
                      &lt;TouchableOpacity
                        onPress={() =&gt; {
                          props.navigation.navigate(o.label);
                          changeColor(o.id);
                        }}&gt;
                        &lt;View style={[styles.sidebarDesign]}&gt;
                          &lt;View style={styles.barIcon}&gt;
                            &lt;Icon.SimpleLineIcons
                              name={o.icon}
                              size={20}
                              color={
                                colorId === o.id ? Color.linkColor : Color.gray
                              }
                            /&gt;
                          &lt;/View&gt;
                          &lt;View style={styles.barLabel}&gt;
                            &lt;Text
                              style={[
                                styles.labelStyle,
                                colorId === o.id
                                  ? styles.linkText
                                  : styles.normalText,
                              ]}&gt;
                              {o.title.toUpperCase()}
                            &lt;/Text&gt;
                          &lt;/View&gt;
                          &lt;View style={styles.barIcon}&gt;
                            {/* &lt;Text&gt;icon&lt;/Text&gt; */}
                          &lt;/View&gt;
                        &lt;/View&gt;
                      &lt;/TouchableOpacity&gt;
                    &lt;/View&gt;
                  ),
                )}
              &lt;/View&gt;
            &lt;/View&gt;
            {/* &lt;Divider style={styles.parentHr} /&gt; */}
            &lt;View style={styles.containerThree}&gt;
              &lt;View style={styles.bottomPart}&gt;
                &lt;View&gt;
                  &lt;TouchableOpacity
                    onPress={() =&gt; {
                      signOut();
                    }}&gt;
      &lt;/StrictMode&gt;
    );
  };
  </code></pre>