Next JS app structure

src
   app
      directors
         page.tsx
         [director]
            page.tsx

directorspage.tsx

import { useRouter } from "next/navigation";

const router = useRouter() 

{data.directors.map((director: any, childIndex: number) => (
    <div key={childIndex} className="manager">
       <a onClick={() => router.push(`${getBasePath()}/${lang}/directors/${director.subUrl}`}>
          <img src="xxx" alt="" />
       </a>                  
    </div>
))}

I have a problem that I am unable to pass the data to another page using next-navigation without any query strings. Since when I used next-router, it comes out the error message that it could not be mounted. May I ask is there any ways to pass the fetched data to another page without using query strings by next-navigation?