React Native gifted chat gets disabled when used with React native gesture handler

So I have my chat interface built with RN Gifted chat. Now, I wanted to include a feature that would take my user to another screen once he swipes (horziontally on the screen). When I used RN gesture handler to implement this feature, it disabled my Gifted chats scroll. I have tried many ways to fix it but could not so far. Here is the related code:

<GestureHandlerRootView>
          <GestureDetector gesture={gesture}>
            <GiftedChat
                //key={messages.length}
                keyboardShouldPersistTaps="handled"
                renderAvatar={null}
                messages={messages}
                onSend={(messages) => onSend(messages)}
                user={{
                    _id: userId,
                    name: "You",
                }}
                placeholder="Type a message..."
                isAnimated={false}
                renderBubble={(props) => (
                    <Bubble
                        {...props}
                        wrapperStyle={{
                            right: { backgroundColor: "lawngreen" }, // Sent messages (you)  //#90EE90 #32CD32 #0BDA51 #98FB98 #00FF7F
                            left: { backgroundColor: "black" }, // Received messages (other party)
                        }}
                        textStyle={{

                            right: { color: "black", fontWeight: "350" },
                            left: { color: "white", fontWeight: "350" },
                        }}


                    />


                )}


            />
            </GestureDetector>
            </GestureHandlerRootView>

Also the function:

const swipeGesture = Gesture.Pan()
.onEnd((event) => {
  if (event.translationX < -50) {
    console.log("Swiped Left");
    runOnJS(navigation.navigate)("ProfileDisplay",{mateId, 
      mateDisplay, 
      isAscended, 
      mateName });
  } else if (event.translationX > 50) {
    Alert.alert("Swiped Right");
  }
});

const nativeGesture = Gesture.Native();

const gesture = Gesture.Race(swipeGesture, nativeGesture);