Buttons are not touchable when used above BottomSheet

[BasselTurky]

I am trying to place some buttons to control snap index like in the provided example,
but every code I write above the BottomSheet component doesn't respond to clicks/touches.

 <DrawerLayout
      ref={drawer}
      drawerWidth={160}
      drawerPosition="right"
      renderNavigationView={() => {
        return <DrawerView navigation={navigation} drawer={drawer.current} />;
      }}
      drawerType="front"
      drawerBackgroundColor="skyblue"
      keyboardDismissMode="on-drag"
      onDrawerClose={() => {
        dispatch(setDrawer(false));
      }}
      onDrawerOpen={() => {
        dispatch(setDrawer(true));
      }}
    >
      <DrawerLayout
        ref={searchDrawer}
        drawerWidth={300}
        drawerPosition="left"
        renderNavigationView={() => {
          return (
            <DrawerSearchView
              navigation={navigation}
              drawer={searchDrawer.current}
            />
          );
        }}
        drawerType="front"
        drawerBackgroundColor="lightgreen"
        keyboardDismissMode="on-drag"
        // onDrawerClose={() => {
        //   dispatch(setDrawer(false));
        // }}
        // onDrawerOpen={() => {
        //   dispatch(setDrawer(true));
        // }}
      >
        <TouchableWithoutFeedback
          onPress={() => {
            Keyboard.dismiss();
          }}
        >
          <SafeAreaView style={styles.container}>
            <View>
              <View style={styles.search}>
                <SearchButton />
                <Button title="press" />
              </View>
            </View>
            <BottomSheet
              keyboardAware="true"
              keyboardAwareExtraSnapHeight={-30}
              // keyboardAwareDrag="true"
              bottomSheerColor="#FFFFFF"
              // ref="BottomSheet"
              initialPosition={"19%"} //200, 300
              snapPoints={["19%", "80%"]}
              isBackDrop={true}
              isBackDropDismissByPress={true}
              isRoundBorderWithTipHeader={true}
              // backDropColor="red"
              // isModal
              // containerStyle={{ zIndex: 5 }}
              // tipStyle={{backgroundColor:"red"}}
              // headerStyle={{ backgroundColor: "red" }}
              // bodyStyle={{backgroundColor:"red",flex:1}}
              header={
                <View>
                  <Text>Header</Text>
                </View>
              }
              body={
                <View>
                  <Text>Body</Text>
                  <View>
                    <TextInput />
                  </View>
                </View>
              }
            />
            {/* Main View Start */}

            {/* Main View End */}
          </SafeAreaView>
        </TouchableWithoutFeedback>
      </DrawerLayout>
    </DrawerLayout>

        <SearchButton />
        <Button title="press" />

these two buttons are not clickable

SearchButton:

import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
import React from "react";
import { FontAwesome5 } from "@expo/vector-icons";

export default function SearchButton() {
  return (
    <TouchableOpacity
      onPress={() => {
        console.log("pressed");
      }}
    >
      <View style={styles.container}>
        <FontAwesome5 name="search-location" size={40} color="black" />
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {},
});

Is this bug?

I tried without the two DrawerLayout components and still the same.