I was showing a list of person with Table from Shadcn UI. My goal is to show a Dialog form with the info of the person indicated in the row. So I iterated the rows and added an onclick trigger that goes to the dialog with route '/showperson/:id' in this way

type rowTypeProp = {
    id: number,
    name: string,
    email: string,
}

function Myrow(data: rowTypeProp) {
    const navigate = useNavigate();
    const onRowClick = (data: rowTypeProp) => {
        navigate(`/showperson/${data.id}`);
    }

    return(
         onRowClick(data)} className="cursor-pointer hover:bg-gray-100">
            {data.id}
            {data.name}
            {data.email}
        
    )

}

the Dialog when exits goes back to te previous page

export function PersonFormDialogPage() {
  const { id } = useParams();
  const [dialogIsOpen, setDialogIsOpen] = useState(true)
  const navigate = useNavigate();
  
  ...

  const onCancelButton = () => {
        setDialogIsOpen(false)
        navigate(-1) 
  }

 ...

  return (
    

      

        
            ...
          
            
              Save changes
            
            
              Exit
            
          
        
      
    
  )
}

It works, but jumping to another page the list of the persons is not anymore in the background of the dialog, while I want that The dialog remins in the same page.

How do I approach the issue?