In React, is it possible to render dynamic route on a component without fetching data with useEffect?

I have a local API and I am importing the data in the component and then display them with .map on the return status.
I actually don't need to use the useEffect hook to fetch the data, since, as mentioned above, I am directly importing them and there is no need for more action.
I would like to create some dynamic route on a child component, but I find myself in difficulty since I know how to create dynamic route only with the useEffect while fetching data and passing perhaps the id with useParams into the url. Since there is no url and not fetching I don't find a way how to pass the id into the child url.

On the parent component I tried to use

{data && data.map((item) => {
return (
    <NavLink to={{path:`/${item.title}`, state: {item}}} key={item.id}>
    <div> {item.title} </div>
    </NavLink>
)})}

bit it's not working. I use state in NavLink to pass the state to the child component.
Any idea how to get around this problem? Do i need to fetch data with useEffect even tho there is no really need for this kind of situation?

change path to pathname

<NavLink to={{pathname:/${item.title}