title: react-hook-form onSubmit not triggered
body: <pre><code>import React, { useState } from &quot;react&quot;;
  import FileBase64 from &quot;react-file-base64&quot;;
  import { useDispatch } from &quot;react-redux&quot;;
  import { makeStyles } from &quot;@material-ui/core/styles&quot;;
  import { TextField, Select, Input, MenuItem, Button } from &quot;@material-ui/core&quot;;
  import { useForm, Controller } from &quot;react-hook-form&quot;;
  import { yupResolver } from &quot;@hookform/resolvers/yup&quot;;
  import * as yup from &quot;yup&quot;;
  import { updatePost } from &quot;../actions/post&quot;;
  
  const useStyles = makeStyles((theme) =&gt; ({
    textField: {
      marginBottom: theme.spacing(2),
    },
    buttons: {
      marginTop: theme.spacing(2),
    },
  }));
  
  const tags = [&quot;fun&quot;, &quot;programming&quot;, &quot;health&quot;, &quot;science&quot;];
  
  const postSchema = yup.object().shape({
    title: yup.string().required(),
    subtitle: yup.string().required(),
    content: yup.string().min(20).required(),
    tag: yup.mixed().oneOf(tags),
  });
  
  const EditPostForm = ({ history, post, closeEditMode }) =&gt; {
    const dispatch = useDispatch();
  
    const [file, setFile] = useState(post?.image);
    const { register, handleSubmit, control, errors, reset } = useForm({
      resolver: yupResolver(postSchema),
    });
  
    const onSubmit = (data) =&gt; {
      const updatedPost = {
        _id: post._id,
        ...data,
        image: file,
      };
      dispatch(updatePost(post._id, updatedPost));
  
      reset();
      setFile(null);
      closeEditMode();
    };
  
    const classes = useStyles();
    return (
      &lt;div&gt;
        &lt;form noValidate autoComplete=&quot;off&quot; onSubmit={handleSubmit(onSubmit)}&gt;
          &lt;TextField
            id=&quot;title&quot;
            label=&quot;Başlık&quot;
            name=&quot;title&quot;
            variant=&quot;outlined&quot;
            className={classes.textField}
            size=&quot;small&quot;
            {...register('title')}
            error={errors?.title ? true : false}
            fullWidth
            defaultValue={post?.title}
          /&gt;
          &lt;TextField
            id=&quot;subtitle&quot;
            label=&quot;Alt Başlık&quot;
            name=&quot;subtitle&quot;
            variant=&quot;outlined&quot;
            className={classes.textField}
            size=&quot;small&quot;
            {...register('subtitle')}
            error={errors?.subtitle ? true : false}
            fullWidth
            defaultValue={post?.subtitle}
          /&gt;
            &lt;Controller 
              render={({field}) =&gt; (
                  &lt;Select
                      {...field}
                      input={&lt;Input /&gt;}
                      className={classes.textField}
                      fullWidth
                  &gt;
                      {
                          tags.map((tag, index) =&gt; (
                              &lt;MenuItem {...field} key={index} value={tag}&gt;
                                  {tag}
                              &lt;/MenuItem&gt;
                          ))
                      }
                  &lt;/Select&gt;
              )}
              name='tag'
              control={control}
              error={errors?.tag ? true : false}
              defaultValue={tags[0]}
          /&gt;
          &lt;TextField
            id=&quot;content&quot;
            label=&quot;İçerik&quot;
            name=&quot;content&quot;
            multiline
            size=&quot;small&quot;
            {...register('content')}
            rows={16}
            className={classes.textField}
            variant=&quot;outlined&quot;
            error={errors?.content ? true : false}
            fullWidth
            defaultValue={post?.content}
          /&gt;
          &lt;FileBase64 multiple={false} onDone={({ base64 }) =&gt; setFile(base64)} /&gt;
          &lt;div className={classes.buttons}&gt;
            &lt;Button color=&quot;primary&quot; variant=&quot;outlined&quot; onClick={closeEditMode}&gt;
              Vazgeç
            &lt;/Button&gt;{&quot; &quot;}
            &lt;Button color=&quot;secondary&quot; variant=&quot;outlined&quot; type=&quot;submit&quot; &gt;
              Kaydet
            &lt;/Button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  
  export default EditPostForm;
  </code></pre>
  <p>I have EditPostForm component, component doesn't give any error but when I tried to submit my form onSubmit function is not triggered.</p>
  <p>I used react-hook-form to create my form and I used material UI components inside form.
  When I Click button which has type submit does not trigger onSubmit function which is called inside of handleSubmit. Why onSubmit is not triggered?</p>