React Native Navigation header height in IOS

I am facing a problem rendering a custom header in my react native app. On Android it works flawlessly, I have the header as the designer wants. But in ios the header is weird. It's like it's height is the original header height (not my custom one) but it's children are affected by the custom header height, making it's content leak to the main component (bellow the header). If I manually set a height in my custom height it doesn't change the VISIBLE HEADER CONTAINER, but it's children is affected. It's like it's rendering the original header and then my custom one on top of it.

I have already placed the SafeAreaView wrapping the App, nothing changed. If anyone can help, thank you very much!

This is what it looks like on Android and ios:

This is the snippet:

import React, { useState } from "react"
import { Avatar, IconButton, Menu, Text } from "react-native-paper"
import { useUser } from "../../hooks/useUser"
import { Pressable, View } from "react-native"
import { useNavigation } from "@react-navigation/native"
import { NotificationItem } from "./NotificationItem"
import placeholders from "../../tools/placeholders"
import { TrianguloMiseravel } from "../TrianguloMiseravel"

interface HeaderProps {}

export const Header: React.FC<HeaderProps> = ({}) => {
    const navigation = useNavigation<any>()
    const { user } = useUser()

    const [showNotifications, setShowNotifications] = useState(false)

    return user ? (
        <View
            style={{
                flexDirection: "row",
                paddingVertical: 15,
                alignItems: "center",
                justifyContent: "space-between",
                width: "100%",
                paddingRight: 30,
            }}
        >
            <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
                <Pressable onPress={() => navigation.navigate("setup")}>
                    <Avatar.Image size={50} source={user.image ? { uri: user.image } : placeholders.avatar} />
                </Pressable>
                <Text variant="titleLarge">{user.name}</Text>
            </View>
            <Menu
                visible={showNotifications}
                onDismiss={() => setShowNotifications(false)}
                anchorPosition="bottom"
                anchor={<IconButton icon={"bell-outline"} onPress={() => setShowNotifications(true)} />}
                contentStyle={{ width: "100%" }}
                style={{ width: "93%" }}
            >
                <TrianguloMiseravel />
                <NotificationItem />
                <NotificationItem />
                <NotificationItem />
            </Menu>
        </View>
    ) : null
}

I have found a solution, if anyone is having this problem:

The error is that I was passing the custom header component to the "headerTitle" option instead of "header", in the screen options prop of the navigator.

For some reason on android looked ok, but on ios it was rendering the custom header only as the title, not the whole component. And makes sense haha