How change handle color

How can I change the handle color? I have tried this:

  <BottomSheet
    ref={this.bottomSheetRef}
    index={-1}
    snapPoints={[0, 255]}
    onChange={this.onChange}
    backdropComponent={BottomSheetBackdrop}
    handleComponent={() =>
      <View style={styles.closeLineContainer}>
        <View style={styles.closeLine}></View>
      </View>
    }
  >
    ...
  </BottomSheet>

styles:

  closeLineContainer: {
    alignSelf: 'center'
  },
  closeLine: {
    width: 40,
    height: 6,
    borderRadius: 3,
    backgroundColor: Colors.lightGray,
    marginTop: 9,
  },

This is the result:

As you can see there i a space in the bottom that I don’t know how I can remove, instead if I remove the custom handleComponent I get this that is what I want:

So my question is, how can I just change the handle color?

Library	Version
@gorhom/bottom-sheet	2.0.0
react-native	0.63.3
react-native-reanimated	1.13.2
react-native-gesture-handler	1.9.0

[Piero87]

@gorhom Thank for the answer, you have to add also the custom handler:

 backgroundComponent={() =>
          <View style={styles.contentContainer}/>
        }
handleComponent={() =>
  <View style={styles.closeLineContainer}>
    <View style={styles.closeLine}></View>
  </View>
}

const styles = StyleSheet.create({
  contentContainer: {
    ...StyleSheet.absoluteFillObject,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    backgroundColor: 'red'
  },
  closeLineContainer: {
    alignSelf: 'center'
  },
  closeLine: {
    width: 40,
    height: 6,
    borderRadius: 3,
    backgroundColor: Colors.lightGray,
    marginTop: 9,
  },
})

In your image above I see that you haven’t used it

[Piero87]

@gorhom Now it works! thank you very much!