Error implementing multiple dropdown with show or hide item

I have code with purpose to show menu with dropdown. The menu currently consists of 3 dropdowns. but when I click on one menu, the other menu items also appear. What is wrong? Below is the code:

  const [openJasa, setOpenJasa] = useState(false);  const [openPenjualan, setOpenPenjualan] = useState(false);  const [openKataPembeli, setOpenKataPembeli] = useState(false);  const DATA = [    {      title: "Jasa",      data: ["Pizza", "Burger", "Risotto"],      onpress: () => setOpenJasa(!openJasa),    },    {      title: "Penjualan",      data: ["French Fries", "Onion Rings", "Fried Shrimps"],      onpress: () => setOpenPenjualan(!openPenjualan),    },    {      title: "Kata Pembeli",      data: ["Water", "Coke", "Beer"],      onpress: () => setOpenKataPembeli(!openKataPembeli),    },  ];  return (<SafeAreaView style={styles.container}><SectionList        sections={DATA}        keyExtractor={(item, index) => item + index}        renderItem={({ item }) =>          openPenjualan && (<View style={styles.item}><Button title={item} onPress={() => navigation.navigate(item)} /></View>          )        }        renderSectionHeader={({ section: { title, onpress } }) => (<Button title={title} onPress={onpress} />        )}      /></SafeAreaView>  );};