How to pass selected data to another screen from Flatlist

I am still new in using React Native and Mobile Apps Development. I tried to copy the code from another tutorial and have little bit of understanding it.

I have Save.js, Feed.js and Details.js. I have successfully retrieved the data from Save.js to Feed.js using FlatList and RenderItem. Now, I want to pass only selected data from Feed.js to Details.js. But I am confused which way to use, whether useNavigation, getParam, withNavigation or anything else? And is there any difference between using Hooks and Class? Btw I'm using Hooks.

Save.js

import { View, TextInput, Image, Button, StyleSheet, TouchableOpacity, Text} from 'react-native'
import { NavigationContainer } from '@react-navigation/native'

export default function Save(props, navigation) {
    const [productName, setProductName] = useState("")
    const [category, setCategory] = useState("")

return (
    <View style={styles.inputView}>
        <TextInput
            placeholder="Product name..."
            onChangeText={(productName) => setProductName(productName)} 
        />
    </View>

    <View style={styles.inputView}>
        <TextInput
            placeholder="Category..."
            onChangeText={(category) => setCategory(category)} 
        />
    </View>

Feed.js

function Feed(props, navigation) {
    const { currentUser, posts } = props;  
    const { navigate } = useNavigation();

return (
     <FlatList
          data={posts}
          keyExtractor={(item, index) => item.key}
          contentContainerStyle={{
             padding: 20,
             paddingTop: StatusBar.currentHeight || 42,
          }}

          renderItem={({item, index}) => (
                <TouchableOpacity 
                    onPress={() => props.navigation.navigate("Details", {productName: item.productName})}

          <View>
                <Text>{item.productName}</Text>
                <Text>Category : {item.category}</Text>
          </View>
       />
)}

const mapStateToProps = (store) => ({
    currentUser: store.userState.currentUser,
    posts: store.userState.posts
})

export default connect(mapStateToProps, null)(Feed);

Details.js

export default function Details({ props, navigate, route }) {
  const productName  =  props.navigation.route.params.productName;
  const { navigate } = useNavigation();
  const productName = useNavigationParam('productName');

  return (
    <View>
      <Text>{productName}</Text>
      <Text>{Category}</Text>
    </View>
  )
}

I am not sure which way to use in Details.js, so I just put all code I have used and tested.