React navigation and react native elements header types are incompatible?

I have been banging my head against this for hours and can't resolve it or make sense of the actual issue.

I have a Home screen where I'm trying to set the headerLeft and headerRight elements

navigation.setOptions({
  headerLeft: (props: HeaderBackButtonProps): React.ReactElement => (
    <View style={{
      display: "flex",
      flexDirection: "row"
    }}>
      <Avatar
        size={38}
        rounded
        source={{ uri: "https://uifaces.co/our-content/donated/6MWH9Xi_.jpg" }}
      />
      <Text style={{
        fontSize: 26,
        color: "#fff"
      }}>Hi, fuzzy-kitten</Text>
    </View>
  ),
  headerRight: (props: HeaderButtonProps): React.ReactNode => (
    <Icon name="notifications-none" size={34} color="white" />
  )
})

I'm trying to access and assign these to the react-native-elements Header component like so

import { NativeStackHeaderProps } from "@react-navigation/native-stack"
import React from "react"
import { Header as HeaderRNE } from "react-native-elements"
import Icon from "react-native-vector-icons/MaterialIcons"

const Header = (props: NativeStackHeaderProps) => {
  return (
    <HeaderRNE
      containerStyle={{
        borderBottomWidth: 0
      }}
      backgroundColor="#7DBAB8"
      leftContainerStyle={{
        flexGrow: 2
      }}
      leftComponent={props.options.headerLeft}
      centerContainerStyle={{
        flexShrink: 1,
        flexGrow: 0
      }}
      rightContainerStyle={{
        flexGrow: 0,
        flexBasis: 34
      }}
      rightComponent={
        <Icon name="notifications-none" size={34} color="white" />
      }
    />
  )
}

export default Header

But when I try that I get this huge weird typescript error

It seems that the type the leftComponentis expecting in the Header is not compatible with what the headerLeft screen option is returning? How can I resolve this, it technically works but having the typescript error making that whole file have an error is hard to develop with.