React Native headerHeight doesn't change based on content in iOS, but works fine in android

Question

When I try to add an to the option headerTitle it displays correctly on Android, but not on iOS. Could anyone help me with this issue?

The stack screen is in a Drawer but i don't think that would change the behaviour.

Difference

I was expecting the header to get the height that the image needs but the header doesn't get the height where in Android it does.

Stack screen

 <Stack.Navigator initialRouteName="CandidateView">
            <Stack.Screen options={{title: "Kandidaten lijst"}} name="CandidateView" component={CandidateView}/>
            <Stack.Screen
                name="CandidateDetailView"
                component={CandidateDetailView}

                ></Stack.Screen>
        </Stack.Navigator>

Screen in the stack

import {Platform, Text, View} from 'react-native';
import {IconButton} from "react-native-paper";
import {Candidate} from "./CandidateView";

export default function CandidateDetailView({navigation, route}){
    const { candidateId } = route.params;

    let data: Candidate = {
        username: "John Doe",
        email: "John.doe@ubeeo.nl",
        candidateId: 1234
    }
    React.useEffect(() => {
        // Use `setOptions` to update the button that we previously specified
        // Now the button includes an `onPress` handler to update the count
        navigation.setOptions({
            headerTitleAlign: 'center',
            headerTitle: () => (
                <View style={{alignItems:'center'}}>
                    <IconButton icon="account-circle" size={50} style={{alignItems: 'center', justifyContent: 'center'}}/>
                    <Text>{data.username}</Text>
                    <Text>{data.email}</Text>
                </View>
            ),
        });
    }, [navigation]);

    return (
        <>
            <View>
                <Text>{JSON.stringify(candidateId)}</Text>
            </View>
        </>
    );
}```