onStateChange doesn't get called when wrapped in React.Component - react-native

Question

I am trying to wrap the NavigationContainer in React component for screen tracking, this approach worked well in V4 but fails in V5 unfortunately. The follow-up question is: will it be possible to wrap it in a function component and not in the react component to have the ability to use hooks? (must admit I am relatively new to react)
Will really appreciate any assistance
App.js
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator drawerType="front" drawerPosition="left">
<Drawer.Screen name="Properties" component={PropertiesTabs} />
<Drawer.Screen name="Profile" component={Profile} />
</Drawer.Navigator>
);
}
const AppContainer = function App() {
return <NavigationContainer>{MyDrawer()}</NavigationContainer>;
}
export default with(AppContainer);
Wrapper.tsx
export function with(Component: any) {
class PNDContainer extends React.Component {
debounce;
componentDidMount() {
console.log('PND Mounted - First Time Screen');
}
componentWillUnmount() { }
render() {
return (<Component onStateChange={() => {
console.log('Screen Changed Doesnt get Called !!!');
}} />);
}
}
return PNDContainer;
}
Expected Behavior
onStateChange should be called, in the V4 the same approach did trigger the onNavigationStateChange
Enviroment
#react-navigation/native 5.7.0
react-native 0.61.5
node 13.10.1
yarn 1.22.1
I can understand why it doesnt work, as I am passing a function element that has no such prop onStateChange, in V4 CreatAppContainer returned a component that had the prop onNavigationStateChange
So I would like to call the function get the element and "inject" my onStateChange implementation, but I think react doesnt work that way (its more like imperative way and react is a declarative framework) so what will be a better approach?
So I tried to debug in chrome to see the onStateChange, no luck...
I think that I misunderstand the concepts, I read the following React Function Components
Edit
For now the only solution that worked for me is to wrap my component in NavigationContainer and returned it
<NavigationContainer onStateChange={() => {console.log('ProbablynewScreen');}}>{Component()}
</NavigationContainer>);
In that case, I noticed that discovering drawer is not that simple there is no clue in the state for the drawer and if I use Class component (unfortunately currently I must) I have no hooks, so how would I discover a drawer open/close ?

Answer 1

App.js
const Drawer = createDrawerNavigator();
function MyDrawer(props) {
return (
<NavigationContainer onStateChange={props.onStateChange}>
<Drawer.Navigator drawerType="front" drawerPosition="left">
<Drawer.Screen name="Properties" component={PropertiesTabs} />
<Drawer.Screen name="Profile" component={Profile} />
</Drawer.Navigator>
</NavigationContainer>
)
};
export default with(MyDrawer)
With.tsx
export function with(Component: any) {
class PNDContainer extends React.Component {
child: any;
componentDidMount() {
//debugger;
console.log('PND Mounted - First Time Screen');
}
componentWillUnmount() { }
render() {
debugger;
return (<Component onStateChange={(state) => {
debugger;
console.log('Screen Changed');
}} />)
}
}
return PNDContainer;
}
Thanks to WhiteBear