Extract form logic into a custom hook
import type { ComponentProps } from 'react'
interface UserFormProps extends ComponentProps<'form'>{}
export function UserForm({ children }: UserFormProps) {
const [state, send] = useUserForm()
return (
<form onSubmit={(event) => {
send({ type="submit", data: event })
}}>
{children}
</form>
)
}