Invalid hook call. Hooks can only be called inside of the body of a function component.

[codingwithashu]

I am using Shadcn UI,
I have created Dialog as a component and passed the form as children (props) so whenever button submit getting error like
"Invalid hook call. Hooks can only be called inside of the body of a function component."

This is Dialogbox

this form with button with useQuery --

This component

[TkDodo]

you're calling DialogForm as a function:

children={DialogForm(...)}

to have hooks work properly, you have to "call" them with jsx:

children={<DialogForm ... />}

see: https://kentcdodds.com/blog/dont-call-a-react-function-component

[codingwithashu]

CancelEmpLeave function uses useQuery, how to call this on button click ?
whenever I call this error comes like "Invalid hook call. Hooks can only be called inside of the body of a function component."