Expo react native weird styling behavior

Question

I am building a login screen with custom InputField Component which I commented here. I take that piece of code and created this component. The issue is, if I remove the commented code and clear the cache and run it locally, the styling of the Custom component is broken. But if I include this commented code itself, it solves this issue. But the commented code has nothing to do with anything. Here is the component as well

import { useState } from "react";
import { Text, View, Image, TextInput, ScrollView } from "react-native";
import InputField from "../../Components/InputField";
import Fontisto from "@expo/vector-icons/Fontisto";
// import { Image } from "expo-image";

export default function Login() {
  let [form, setForm] = useState({
    email: "",
    password: "",
  });

  return (
    <ScrollView
      contentContainerStyle={{
        justifyContent: "flex-end",
        height: "100%",
      }}
      className="flex-1 bg-white "
    >
      <Image
        source={require("../../assets/images/login.png")}
        className="w-full h-64 my-10"
      />
      <View className="border shadow-sm rounded-t-[40px] bg-blue-500 p-4 pb-64">
        <Text id="title" className="text-center text-xl  font-bold">
          Login
        </Text>
        {/* <View className="flex flex-row w-full justify-center items-center rounded-xl my-2 gap-2  bg-white">
          <View className="px-4">
            <Fontisto name="email" size={26} color="black" />
          </View>
          <TextInput
            className="flex-1  rounded-l-none bg-white rounded-md"
            label="Email"
            value={form.email}
          />
        </View> */}
        <InputField
          onChangeText={(text) => setForm({ ...form, email: text })}
          Icon={<Fontisto name="email" size={26} color="black" />}
          label={"Email"}
          value={form.email}
          inputType="email-address"
        />

        <InputField
          onChangeText={(text) => setForm({ ...form, password: text })}
          Icon={<Fontisto name="email" size={26} color="black" />}
          label={"Password"}
          value={form.password}
          secureTextEntry={true}
        />
      </View>
    </ScrollView>
  );
}

//////////////// InputField Component //////////////////////////

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

const InputField = ({
  label,
  value,
  onChangeText,
  Icon,
  secureTextEntry,
  inputType = "default",
  ...props
}) => {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
    >
      <View className="flex flex-row w-full justify-center items-center rounded-md my-2 gap-2  bg-white">
        <View className="px-4">{Icon}</View>
        <TextInput
          className="flex-1  rounded-l-none bg-white rounded-md"
          label={label}
          placeholder={label}
          keyboardType={inputType}
          value={value}
          onChangeText={onChangeText}
          secureTextEntry={secureTextEntry}
        />
      </View>
    </KeyboardAvoidingView>
  );
};

export default InputField;