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.