The KeyboardAvoidingView is not behaving the way I want it to

Question

So the code for my login screen is

import {
  StyleSheet,
  Text,
  View,
  StatusBar,
  SafeAreaView,
  TextInput,
  ImageBackground,
  KeyboardAvoidingView,
} from "react-native";
import React from "react";
import LottieView from "lottie-react-native";

const LoginScreen = () => {
  return (
    <View style={styles.container} behavior="padding">
      <ImageBackground
        source={require("../../assets/images/cool-background.png")}
        resizeMode="cover"
        style={styles.image}
      >
        <KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
          <View style={styles.lottieContainer}>
            <LottieView
              source={require("../../assets/lottiejson/login.json")}
              autoPlay
            />
          </View>
          <View style={styles.inputContainer}>
            <TextInput placeholder="Email" style={styles.input} />
            <TextInput
              placeholder="password"
              style={styles.input}
              secureTextEntry
            />
          </View>
        </KeyboardAvoidingView>
      </ImageBackground>
    </View>
  );
};

export default LoginScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    flex: 1,
    flexDirection: "column",
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
  },
  text: {
    color: "white",
    fontSize: 42,
    lineHeight: 84,
    fontWeight: "bold",
    textAlign: "center",
    backgroundColor: "#000000c0",
  },
  inputContainer: {
    alignItems: "center",
    flex: 1,
  },
  input: {
    backgroundColor: "#51C9F9",
    width: "75%",
    height: 50,
    borderRadius: 20,
    marginTop: 5,
    elevation: 10,
    color: "#8FF69C",
    padding: 5,
  },
  lottieContainer: {
    width: "100%",
    height: 400,
  },
});

I want the keyboard to push the entire TextInput View and the lottieContainer up, so that the TextInputs are visible and not hidden by the keyboard, but instead it just doesn't do anything. I tried putting the KeyboardAvoidingView tag encapsulating the ImageBackground and in that case whenever I clicked on the input, half the screen would become white and that's it.