Components within KeyboardAvoidingView and ScrollView overlap when the keyboard appears

I have ScrollView inside of KeyboardAwareScrollView(or KeyboardAvoidingView) and I have two components inside. But, whenever the keyboard is invoked, the two components overlap:

<KeyboardAwareScrollView
    style={{ flex: 1 }}
>
    <SafeAreaView style={styles.container} >
        <ScrollView
            contentContainerStyle={styles.container}
            style={{ flexGrow: 1 }}
            showsVerticalScrollIndicator={false}
        >
            <View style={styles.photo}>
                <ImageUpload />
            </View>
            <View style={styles.form}>
                <Form
                    submitHandler={submitHandler}
                    loading={loading}
                />
            </View>
        </ ScrollView>
    </SafeAreaView>
</KeyboardAwareScrollView>

How do I prevent the two components, Form and ImageUpload, from overlapping when the keyboard appears?

The style for the components is as follows:

    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        width: width - 20,
        marginTop: 10,
    },
    photo: {
        flex: 1,
        width: "100%",
        alignItems: 'center',
        justifyContent: 'center',
    },
    form: {
        flex: 2,
        width: "100%",
    },