react-native - Appbar.content には上に空のスペースがあります

Question

次のコードを使用して、react-native-paperandでヘッダーを作成していreact-navigationます。

return (
        <Appbar.Header theme={{ colors: { primary: "white" } }}>

            {previous ? (
                <Appbar.BackAction onPress={navigation.pop} color={theme.colors.primary} />
            ) : (
                <TouchableOpacity onPress={()=>{navigation.openDrawer();}}>
                    <Avatar.Image
                        size={40}
                        source={{uri: "https://i.imgur.com/2tTU7q1.jpg"}}
                    />
                </TouchableOpacity>
            )}
            <Appbar.Content
                title={
                   <Image source={require("../../assets/images/icon.png")}
                            style={{
                                width: 40,
                                height: 40,
                            }}
                    />
                   }
                titleStyle={{backgroundColor: "red",}}
                style={{alignItems: "center"}}
            />
        </Appbar.Header>
    );

その結果、画像の上に体系的に空のスペースができます (背景を赤にして、より明確にします)。

このスペースは .jpg には存在せず、実際にはどの画像にも表示されます。@expo/vector-icons画像の代わりにMaterialCommunityIcons (から) を使用すると、このスペースは表示されません。

これの原因とそれを取り除く方法はありますか？