How do I fix glitching of keyboard when textInput is below keyboard level?

Question

I am developing a password management app in react-native(expo). I Today, I encountered this glitch/bug where the keyboard automatically hides if a TextInput is below the keyboard level. It works if I position it, above keyboard level. I tried Wrapping it with KeyboardAvoidingView but then, I could not interact with TextInput anymore. Also, I am using Input component from "react-native-elements". Here is the demonstration of the problem.

Below is my code:-

<View
      style={{
        display: "flex",
        flexDirection: "column",
        position: "relative",
        top: "25%",
        marginLeft: 12,
      }}
    >
      <View style={{ display: "flex", flexDirection: "row" }}>
        <CheckBox
          value={this.state.useAlpha}
          onValueChange={(val) => this.setState({ useAlpha: val })}
        ></CheckBox>
        <Text style={{ color: "#002c3e" }}>Use Alphabets</Text>
      </View>

      <View
        style={{
          display: "flex",
          flexDirection: "row",
          marginTop: 8,
        }}
      >
        <CheckBox
          value={this.state.useNum}
          onValueChange={(val) => this.setState({ useNum: val })}
        ></CheckBox>
        <Text style={{ color: "#002c3e" }}>Use Numbers</Text>
      </View>

      <View
        style={{
          display: "flex",
          flexDirection: "row",
          marginTop: 8,
        }}
      >
        <CheckBox
          value={this.state.useSym}
          onValueChange={(val) => this.setState({ useSym: val })}
        ></CheckBox>
        <Text style={{ color: "#002c3e" }}>Use Symbols</Text>
      </View>

      <View
        style={{ display: "flex", flexDirection: "row", marginLeft: 6 }}
      >
        <Text style={{ color: "#002c3e" }}>Password Length:-</Text>
        <Input
          containerStyle={{ marginTop: -6, marginRight: 6 }}
          keyboardType="numeric"
          inputContainerStyle={{
            borderBottomWidth: 2,
            width: 60,
            fontSize: 12,
            borderBottomColor: "#002c3e",
          }}
          style={{ marginBottom: -10, fontSize: 12 }}
          value={this.state.passwordLength}
          onChangeText={(txt) => this.setState({ passwordLength: txt })}
        ></Input>
      </View>
    </View>