KeyboardAvoidingView makes a messy the flexbox

Question

I have the following code:

  return (
<KeyboardAvoidingView style={{ flex: 1 }} behavior="padding" enabled>
  <View style={style.flex1}>
    <View style={style.imageContainer}>
      <Image
        style={style.image}
        source={require("../../assets/pictures/LoginBackground.png")}
        resizeMode="cover"
      />
      <View style={style.blackOpacity} />
    </View>
    <View style={style.contentContainer}>
      <View style={style.flex1}>
        <Text style={style.welcomeHeader}>{Strings.Welcome}</Text>
      </View>
      <View style={style.fieldsContainer}>
        <LoginInput
          placeholder={Strings.MailPlaceholder}
          keyboardType={"email-address"}
          onChangeText={setEmail}
          styles={style.itemContainer}
        />
        <LoginInput
          placeholder={Strings.PasswordPlaceholder}
          secureTextEntry={true}
          onChangeText={setPassword}
          styles={style.itemContainer}
        />

        <TouchableOpacity
          disabled={isLoginFormEmpty()}
          style={
            isLoginFormEmpty()
              ? [style.loginBtn, style.itemContainer, style.disabled]
              : [style.loginBtn, style.itemContainer]
          }
          onPress={() => submitLogin()}
        >
          <Text style={style.loginBtnText}>{Strings.LoginBtn}</Text>
        </TouchableOpacity>
      </View>
    </View>
  </View>
</KeyboardAvoidingView>

With the following style:

const style = StyleSheet.create({
  flex1: {
    flex: 1,
  },
  imageContainer: {
    flex: 1,
  },
  image: {
    width: "100%",
    height: "100%",
  },
  blackOpacity: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: "black",
    opacity: 0.6,
  },
  contentContainer: {
    flex: 2,
    backgroundColor: Colors.opacityBlack,
    alignItems: "center",
  },
  welcomeHeader: {
    fontFamily: getFontFamily("Heebo", "600"),
    textAlign: "right",
    fontSize: scaleFontSize(40),
    marginTop: verticalScale(10),
    color: Colors.white,
  },
  fieldsContainer: {
    flex: 5,
    alignItems: "center",
    flexDirection: "column",
    justifyContent: "space-between",
  },
  loginBtn: {
    justifyContent: "center",
    backgroundColor: Colors.submitPurple,
    marginBottom: verticalScale(120),
  },
  disabled: {
    opacity: 0.5,
  },
  loginBtnText: {
    fontFamily: getFontFamily("Heebo", "500"),
    fontSize: scaleFontSize(20),
    textAlign: "center",
    color: Colors.black,
  },
  itemContainer: {
    width: horizontalScale(250),
    height: verticalScale(40),
    borderRadius: horizontalScale(20),
  },
});

When the keyboard is closed, everything looks ok:

But when I open the keyboard, it makes all the inputs closer and doesn't keep the spaces between each element:

How do I keep the space between the elements even when the keyboard is open?

I tried to change the behavior to position or put the KeyboardAvoidingView inside the main View but it doesn't work. Also tried to put everything into a ScrollView but it destroyed the whole screen.