React-router-native navigating with parameter

Im trying to create react native navigation with parameter. but when i navigate to the page i component i don't get the parameter value. when i click the touchableOpacity and call the navigation function the receiver function didn't get the value of props. any thoughts feel free to modify my code if i'm wrong

import { NativeRouter, Routes, Route } from "react-router-native"
import { useNavigate, useParams } from 'react-router-dom'

//router
<NativeRouter>
         <Routes>
             <Route path="/" element={<DashboardIndex />}/>
             <Route path="/Page1WithParamater" element={<Page1WithParamater />} />              
         </Routes>
</NativeRouter>


//dashboard page
const DashboardIndex = (props: iItemList) => {
   const nav = useNavigate();


   const onGoPage1WithParameter = () => {
        nav('/Page1WithParamater/:icon',props.icon);
   }

    return (
        <TouchableOpacity onPress={onGoPage1WithParameter} key={props.name} style={[GlobalStyle.centeritem]}>
            <Image style={style.image} source={props.icon} />
            <Text style={style.amountLabel}>{props.amount}</Text>
            <Text>{props.name}</Text>
        </TouchableOpacity>
    );
}



// page1withparam
interface iprops {
    icon: {}
} 
    

const Page1WithParamater = (props: iprops) => {
    console.log(props);
    return (
        <View style={style.container}>
            <View style={style.row}>
                <View style={GlobalStyle.column}>
                    <Image  style={style.Image} source={props.icon}></Image>
                </View>
                 
            </View>
           
        </View>
    )
}