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>
  );
};