keyboard hides the some text input , I'm trying to use keyboardAvoidingView. it has no effect here. ?

this is my code

• SEE THE CODE BETWEEN *****

IF I wrap scroll view with keyboardavoidingView or I wrap KeyboardAvoidingView with scroll.. it is not changing anything here, I have tried both

//import statments 

    return (

        <View style={style.MainContainer}>

            <View style={style.chooseDpContainer}>

  <TouchableOpacity onPress={openImagePickerAsync} style={style.chooseDpContainer}>
{(!ImageUrl)?(<><Avatar.Icon size={70} icon="camera-plus-outline" style={{marginEnd:10}} />
<Text>Choose a cool  Dp for your Pet</Text></>):
 (<><Avatar.Image size={70} source={{uri:ImageUrl}} style={{marginEnd:10}}/>
 
  <Text>Choose another Image?</Text>
  <Button mode="text" icon="delete" style={{fontSize:40}}  onPress={()=>{
      setImageUrl('')
  }}>Remove</Button>
  </>
 )}
  </TouchableOpacity>
  </View>
  <View style={style.divider} ></View>
  <Text style={{marginBottom:10}}>Your Pet Details</Text>

{/* KEYBOARD HIDES INPUT, PLEASE  REVIEW THIS CODE*/}
{/* *************************************************** */}

 <KeyboardAvoidingView style={{width:'100%'}}
 behavior={Platform.OS==="ios"?'padding':"height"}>
  <ScrollView style={{width:'100%'}}>
    {/* //  behavior='position'> */}
  <View style={style.Input}><TextInput label="Name"/></View>
  <View style={style.Input}><TextInput label="Age"/></View>
  <View style={style.Input}><TextInput label="Breed"/></View>
  <View style={style.Input}><TextInput label="Gender"/></View>
 
  </ScrollView>
  </KeyboardAvoidingView>

    {/* KEYBOARD HIDES INPUT, THANKS*/}  
{/* *************************************************** */}

        </View>
    )
}