How to close a bottom sheet

Question

I am new to react native and I was trying to use the bottom sheet. For some reason, I cannot close the bottom sheet when the cross icon is pressed. Below is the code

import React, { useRef } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, FlatList } from 'react-native';
import BottomSheet from 'react-native-simple-bottom-sheet';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

const BottomSheet1 = () => {
  const bottomSheetRef = useRef();

  const closeBottomSheet = () => {
    if (bottomSheetRef.current) {
      bottomSheetRef.current.togglePanel();
    }
  };


  const data = [
    { label: '2D Test' },
    { label: '2D Testing 2' },
    { label: '2D Testing 3' },
    { label: '2D Testing 1' },
    { label: '2D Testzaffar' },
    { label: '2D TestZaffar' },
  ];

  const renderItem = ({ item }) => (
    <View style={styles.itemContainer}>
      <TouchableOpacity style={styles.item}>
        <View style={styles.labelContainer}>
          <Text style={styles.label}>{item.label}</Text>
          <MaterialIcons name="keyboard-arrow-down" size={24} color="#555" style={styles.arrowIcon} />
        </View>
      </TouchableOpacity>
    </View>
  );

  return (
    <View style={styles.container}>
      <BottomSheet ref={bottomSheetRef} onClose={closeBottomSheet} maxHeight={500}>
        <View style={styles.bottomSheet}>
          <TouchableOpacity onPress={() => bottomSheetRef.current.close()} style={styles.closeIcon}>
            <MaterialIcons name="close" size={24} color="#555" />
          </TouchableOpacity>
          <View style={styles.header}>
            <Text style={[styles.title, { fontFamily: 'Montserrat' }]}>Truminds</Text>
            <Text style={styles.create}>+ Create Subspace</Text>
          </View>
          <View style={styles.separator} />
          <FlatList
            style={styles.list}
            data={data}
            renderItem={renderItem}
            keyExtractor={(item) => item.label}
            maxHeight={250}
          />
        </View>
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 0,
    paddingTop: 48,
  },
  itemContainer: {
    backgroundColor: '#f2f2f2',
    padding: 10,
    borderRadius: 10,
    marginBottom: 17,
  },
  title: {
    fontSize: 24,
    fontWeight: 800,
  },
  create: {
    fontSize: 12,
    fontWeight: 600,
    color: '#0F8D48',
  },
  bottomSheet: {
    backgroundColor: 'white',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    paddingHorizontal: 5,
    paddingBottom: 10,
    marginTop: -20,
  },
  separator: {
    height: 1,
    backgroundColor: '#ddd',
    marginVertical: 10,
  },
  list: {
    marginTop: 10,
  },
  listItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 10,
  },
  labelContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  label: {
    fontSize: 16,
    fontWeight: 600,
  },
  arrowIcon: {
    marginLeft: 10,
  },
  listArrowIcon: {
    marginLeft: 10,
  },
  closeIcon: {
    position: 'absolute',
    top: 5,
    right: 15,
  },
});

export default BottomSheet1;

There's no response on clicking the close icon. Only when I click the top portion of the bottom sheet, it appears to go down but pop back upwards again.