How to integrate React Navigation Back Button with a WebView - reactjs

Question

I tried following this tutorial https://www.reactnativeschool.com/integrating-react-navigation-back-button-with-a-webview.
Here is my Index.js/App.js code. Any guidance mainly HOW TO ADD adding natigationOptions to Stack.Screen.
import React, { useEffect } from "react";
import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from "#react-navigation/native";
import {
createStackNavigator,
HeaderBackButton, // new import
} from "#react-navigation/stack";
import Home from "./screens/Home";
import Details from "./screens/Details";
import Icon from "react-native-vector-icons/FontAwesome";
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: true,
}}
>
<Stack.Screen name="Home" component={Tabs} />
<Stack.Screen
name="Details"
component={Details}
options={({ navigation }) => ({
headerTitle: "Details",
headerLeft: (props) => {
const headerLeftInfo = navigation.getParam("headerLeftInfo");
if (headerLeftInfo) {
return (
<HeaderBackButton
{...props}
title={headerLeftInfo.title}
onPress={headerLeftInfo.onPress}
/>
);
}
return <HeaderBackButton {...props} />;
},
})}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
const styles = StyleSheet.create({});
How to add navigationOptions like the code below:
const App = createStackNavigator({
Index: {
screen: Index,
navigationOptions: {
headerTitle: 'Index',
},
},
Details: {
screen: Details,
navigationOptions: ({ navigation }) => ({
headerTitle: 'Details',
}),
},
});