fix: call submit directly from onClick (#3907)

sites/public/src/components/account/ConfirmationModal.tsx

@@ -21,11 +21,11 @@ const ConfirmationModal = (props: ConfirmationModalProps) => {
   // This is causing a linting issue with unbound-method, see open issue as of 10/21/2020:
   // https://github.com/react-hook-form/react-hook-form/issues/2887
   // eslint-disable-next-line @typescript-eslint/unbound-method
-  const { register, handleSubmit, errors, watch } = useForm()
+  const { register, handleSubmit, errors, watch, getValues } = useForm()
   const email = useRef({})
   email.current = watch("email", "")
 
-  const onSubmit = async ({ email }) => {
+  const onSubmit = async (email) => {
     try {
       const listingId = router.query?.listingId as string
       await resendConfirmation(email, listingId)
@@ -39,6 +39,11 @@ const ConfirmationModal = (props: ConfirmationModalProps) => {
     window.scrollTo(0, 0)
   }
 
+  const onFormSubmit = async () => {
+    const { email } = getValues()
+    await onSubmit(email)
+  }
+
   useEffect(() => {
     const redirectUrl = router.query?.redirectUrl as string
     const listingId = router.query?.listingId as string
@@ -83,15 +88,7 @@ const ConfirmationModal = (props: ConfirmationModalProps) => {
         window.scrollTo(0, 0)
       }}
       actions={[
-        <Button
-          variant="primary"
-          onClick={() => {
-            document
-              .getElementById("resend-confirmation")
-              .dispatchEvent(new Event("submit", { cancelable: true }))
-          }}
-          size="sm"
-        >
+        <Button type="submit" variant="primary" onClick={() => onFormSubmit()} size="sm">
           {t("authentication.createAccount.resendTheEmail")}
         </Button>,
         <Button