How to useQuery with id and trigger it onClick.

[NoahZhangAcer]

I am new to react-query and I got a situation that I need some help.
I have a user table, each row will have an edit button, which should open a dialog and has initial data(name/DOB) of the user displayed.
Here is my hook:

export const useUserDetails= (userId: number) => {
    const getUserDetails= useQuery({
        queryKey: ['userDetails'],
        queryFn: async () => {
            const response = await getDetailsApi(userId)
            return response.data
        },
        enabled: true,
        refetchOnWindowFocus: false,
    })
    return {
        userDetails: getUserDetails.data,
    }
}

I have similar situation when I clicked a row of table and displaying the detail of that row item, but that button is just a Link which normally take you to a new page that has the item_id in the params, and you could call hook at the top of that component like

const {itemId}= useParams()
const {itemDetails} = useItem(itemId)
if (itemDetails === undefined){
return (<div>Loading...</div>)
}
return (<div>Actual component with itemDetails displayed</div>)

But now my problem is, instead of having a new page, for the button of my table role, I have an onClick function that will receive the rowData that includes userId. Then I want to call useUserDetails to get the detail and render the dialog.
<Button title="Edit" onClick={() => editItem(user)} />

const editItem = (user: User) => {
        setItem({ ...user });
        const { userDetails } = useUserDetails(user.id)
        setSelectedRoles(userDetails.roles) //set dialog to display userDetails data
        setRenderEditItemDialog(true);// open dialog
    };

I know my code above will not work because I should not call hooks in an onclick handler, and I know there is a refetch() function from react-query to achieve onClick fetching, but how to do that when the react-query needs id?