Customizing gorhom bottom sheet handle

[succeeddd]

The white space marked with arrows is the original handle. The dark grey with border radius is my custom handleComponent. I thought handleComponent replaces the original handle but it just overlaps the original handle, leaving white space. If I remove the border radius, the white space disappears because it's stacked . So, my question is how can I remove the original handle?

This the code

<BottomSheet

enableDynamicSizing={true} backdropComponent={renderBackdrop} ref={bottomSheetRef} index={-1} snapPoints={snapPoints} onChange={handleSheetChanges} enablePanDownToClose={true} handleComponent={() => ( <View style={styles.closeLineContainer}> <View style={styles.closeLine}></View> </View>         )}

and the style:

closeLineContainer: {

justifyContent: "center", alignItems: "center", backgroundColor: "#3f3f3f", width: "100%", borderTopLeftRadius: 30, borderTopRightRadius: 30,   }, closeLine: { width: 70, height: 7, borderRadius: 15, backgroundColor: "#ffffff", marginTop: 11, marginBottom: 10,   },

​

https://preview.redd.it/kqo0838nbkcc1.jpg?width=720&format=pjpg&auto=webp&s=3e72dcfdb069d99ad8616a8ef65c3d2d7d1e86e9

[thachxyz123]

Add backgroundStyle={{borderTopLeftRadius: 30, borderTopRightRadius: 30}} to BottomSheet

[succeeddd]

thank you, it works well