react native – Keyboard creates different iOS devices

Having an issue with inconsistency with multiple iOS devices. The same code creates gaps when I click the TextInput iPhone SE (2nd Gen), IPad Pro (10.5-inch), but it doesn’t create the same gap with iPhone 14 Pro. Am I missing something? What is the best practice to fix this issue?

I am on the simulator, but it is happening on physical devices (at least iPhone SE).

If I comment out the behavior={Platform.OS === "ios" ? "padding" : "height"}, it may look okay, but my original code (below is the simplistic version), then the keyboard is closing the input fields.

import {
  ImageBackground,
  KeyboardAvoidingView,
  Platform,
  TextInput,
} from "react-native";
import React from "react";

const Issue = () => {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      keyboardVerticalOffset={Platform.OS === "ios" ? 90 : 120}
      style={{
        flex: 1,
        flexGrow: 1,
      }}
    >
      <ImageBackground
        source={{
          uri: "https://images.unsplash.com/photo-1613828330596-982c62f72e9a?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        }}
        style={{ flex: 1, flexGrow: 1 }}
      >
        <TextInput
          style={{
            height: 40,
            margin: 12,
            borderWidth: 1,
            padding: 10,
          }}
        ></TextInput>
      </ImageBackground>
    </KeyboardAvoidingView>
  );
};

export default Issue;