React Native Stack Navigation Params

I'm trying to use params on the header of my Image details screen! Here's a brief explanation.

My user enters an input, I call an api and display the info on the screen:

Home.js

<View style={styles.viewpic}>
              <TouchableOpacity onPress={() => navigation.navigate('ImageDetails', 
             item)}>
            <Image 
            style={{
    height: 104,
    
    }} 
    source={{uri:item.url}}/>
    </TouchableOpacity>
          </View>

Then, the user clicks on the chosen data, displayed on the screen, and my app navigates to the details page:

ImageDetails.js

export default function ImageDetails({navigation}) {    

    return(
        <ScrollView>
        <View>
        <Image 
       source={{uri:navigation.getParam('url')}}/>  
       <View style={styles.descriptionBox}>
            <Text style={styles.imageDet}>Description:{" "} 
       {navigation.getParam('explanation')}</Text>
       </View>
        </View>
        </ScrollView>

this is the navigation folder I have:

homeStack.js

const screens = {
    Home: {
        screen: Home,
        navigationOptions:{ headerShown: false}
        
    },
    ImageDetails: {
        screen: ImageDetails,
        navigationOptions: () => {
            return{
                 headerTitle: () => <Header/>,
            }
        }
    }
}

const HomeStack = createStackNavigator(screens);

export default createAppContainer(HomeStack);

plus the HEADER component that I'm trying to use in the header navigation (top of the screen):

Header.js

export default function Header({navigation}) {

    return(
         
       <View style={styles.descriptionBox}>
            <Text style={styles.imageDet}>Params here!</Text>
       </View>

    
    )

Here is what the Image detail screen looks like:

My goal is:

to be able to use the data params on the header.

I tried a few different combos but I keep on getting the error: "cant read params"

Some of the things I tried:

Header.js :

export default function Header({navigation}) {

    return(
         
       <View style={styles.descriptionBox}>
            <Text style={styles.imageDet}>Test:{navigation.getParam('item')} 
       </Text>
       </View>

    
    )

Homestack component:

homeStack.js

const screens = {
    Home: {
        screen: Home,
        navigationOptions:{ headerShown: false}
        
    },
    ImageDetails: {
        screen: ImageDetails,
        navigationOptions: ({navigation}) => {
            return{
                 headerTitle: () => <Header navigation= 
   {navigation.getParams('title')}/>,
            }
        }
    }
}

const HomeStack = createStackNavigator(screens);

export default createAppContainer(HomeStack);

I also have read the documentation but I'm not sure how I would insert the "Navigation.push" with params here.

Thanks for your help!

try using the existent image details page instead of creating a new one!

ImageDetails: {
        screen: ImageDetails,
        navigationOptions: ({navigation}) => {
            return{
                 headerTitle: () => {
                     return(
                         <View>
                 <Text>{navigation.getParam('title')}
                         </Text>
                </View>
                     )
                     
                },