title: react-hook-form not working when onSubmit called
body: <p>I'm trying to have react forms save and then update some user settings.</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import Dropdown from &quot;components/Settings/Preferences/Dropdown&quot;;
  import { useForm } from &quot;react-hook-form&quot;;
  
  function Pill({ value, handleChange,optionName,substanceKey,key }) {
      return (
        &lt;div  className=&quot;bg-gray-600 text-white text-xs px-2 py-0.5 w-max-content rounded-lg align-middle mr-1 mb-1&quot;&gt;
          {value}
          &lt;svg
            xmlns=&quot;http://www.w3.org/2000/svg&quot;
            width=&quot;16&quot;
            height=&quot;16&quot;
            viewBox=&quot;0 0 24 24&quot;
            fill=&quot;none&quot;
            stroke=&quot;currentColor&quot;
            strokeWidth=&quot;2&quot;
            strokeLinecap=&quot;round&quot;
            strokeLinejoin=&quot;round&quot;
            className=&quot;inline-block align-middle cursor-pointer&quot;
            onClick={() =&gt; handleChange(value, &quot;remove&quot;,optionName,substanceKey)}
          &gt;
            &lt;line x1=&quot;18&quot; y1=&quot;6&quot; x2=&quot;6&quot; y2=&quot;18&quot; /&gt;
            &lt;line x1=&quot;6&quot; y1=&quot;6&quot; x2=&quot;18&quot; y2=&quot;18&quot; /&gt;
          &lt;/svg&gt;
        &lt;/div&gt;
      );
    }
  
  function InventoryPage(props) {
      const [substanceDetails, setSettings] = useState(
          [
            {
              substance: &quot;Modafinil&quot;,
              scheduledtimes: [8, 13],
              startdate: &quot;1996-12-02&quot;,
              enddate: &quot;2020-01-01&quot;,
              duration: 2,
              planneddose: &quot;10mg&quot;
            },
            {
              substance: &quot;Coveve&quot;,
              scheduledtimes: [8, 12],
              startdate: &quot;1996-12-02&quot;,
              enddate: &quot;2020-01-01&quot;,
              duration: 2,
              planneddose: &quot;10mg&quot;
            }
        );
  
  
        const { register, handleSubmit,watch, errors,formState } = useForm();
        const handleChange = (value, mode,optionName,substanceKey) =&gt; {
          var removedSubstances ;
          if(mode===&quot;remove&quot;) {
            if (optionName === &quot;substance&quot; ) {
              removedSubstances = substanceDetails.find(v=&gt; v.substance === value) ? substanceDetails.filter(v =&gt; v.substance !== value) : [...substanceDetails, value]
            }
           
         else {
            removedSubstances = substanceDetails.reduce((acc, key) =&gt; {
        //  return acc; // remove keys
          if (optionName === &quot;scheduledtimes&quot;) { //works
            // remove 14 in times for keys
            return [...acc, { ...key,
              scheduledtimes: key.scheduledtimes.filter(time =&gt; time !== value)
            }]
          }
          if (optionName === &quot;planneddose&quot;) {
            // modify the power by concatenating an new object with partial info
            if (key.substance == substanceKey){
        
            return [...acc, {...key,
              planneddose: null
            }];
          } else {
            return [...acc, {...key,
              planneddose: key.planneddose
            }];
          }
          }
        
          if (optionName === &quot;startdate&quot;) {
            // modify the power by concatenating an new object with partial info
            if (key.substance == substanceKey){
        
            return [...acc, {...key,
              startdate: null
            }];
          } else {
            return [...acc, {...key,
              startdate: key.startdate
            }];
          }
          }
          if (optionName === &quot;enddate&quot;) {
            // modify the power by concatenating an new object with partial info
            if (key.substance == substanceKey){
        
            return [...acc, {...key,
              enddate: null
            }];
          } else {
            return [...acc, {...key,
              enddate: key.enddate
            }];
          }
          }
        
          if (optionName === &quot;duration&quot;) {
            // modify the power by concatenating an new object with partial info
            if (key.substance == substanceKey){
        
            return [...acc, {...key,
              duration: null
            }];
          } else {
            return [...acc, {...key,
              duration: key.duration
            }];
          }
          }
          
        }
        , []);
         }
        setSettings(removedSubstances)
          }
        };
    const onSubmit = data =&gt; console.log(data);
    const [pending, setPending] = useState(false);
    
     
    console.log(watch(&quot;example&quot;)); // watch input value by passing the name of it
  
    if (substanceDetails === false) {
      return (
        &lt;div className=&quot;md:grid md:grid-cols-3 md:gap-6&quot;&gt;
          &lt;div className=&quot;md:col-span-1&quot;&gt;
            &lt;h3 className=&quot;text-lg font-medium leading-6 text-gray-900&quot;&gt;
              Substances
            &lt;/h3&gt;
          &lt;/div&gt;
          &lt;div className=&quot;mt-5 md:mt-0 md:col-span-2 font-mono font-medium text-blue-500&quot;&gt;
            loading...
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
    
  
    return (
      &lt;div className=&quot;md:grid md:grid-cols-3 md:gap-6&quot;&gt;
  
      &lt;div className=&quot;mt-5 md:mt-0 md:col-span-2&quot;&gt;
       &lt;form onSubmit={handleSubmit(onSubmit)} id=&quot;formName&quot;&gt;
            &lt;div className=&quot;flex flex-wrap mt-2&quot;&gt;
              {substanceDetails &amp;&amp;
                substanceDetails.map((subst) =&gt; (
                  &lt;Pill
                    registerInput={register}
                    optionLabel=&quot;substance&quot;
                    value={subst.substance}
                    key={subst.substance}
                    substanceKey = {subst.substance}
                    optionName={&quot;substance&quot;}
                    // allOptions={[&quot;Dexamphetamine&quot;, &quot;Ritalin&quot;]}
                    handleChange={handleChange}
                    error={formState.errors?.content ? true : false}
                  /&gt;
                ))}
            &lt;/div&gt;
            &lt;Dropdown
              registerInput={register}
              optionLabel=&quot;Substance&quot;
              selectedOption={substanceDetails.substance}
              optionName={&quot;substance&quot;}
              allOptions={[&quot;Dexamphetamine&quot;, &quot;Ritalin&quot;]}
              error={formState.errors?.content ? true : false}
            /&gt;
            &lt;button
              className=&quot;inline-flex items-center justify-center px-5 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:text-indigo-600 hover:bg-indigo-50 focus:outline-none focus:shadow-outline focus:border-indigo-300 transition duration-150 ease-in-out&quot;
              variant={props.buttonColor}
              size={props.inputSize}
              type=&quot;submit&quot;
              disabled={pending}
              form=&quot;formName&quot;
  
            &gt;
              {pending ? (
                &lt;&gt;
                  &lt;span&gt;Saving&lt;/span&gt;
                  &lt;svg
                    xmlns=&quot;http://www.w3.org/2000/svg&quot;
                    viewBox=&quot;0 0 24 24&quot;
                    className=&quot;animate-spin h-4 w-4 ml-3 fill-current&quot;
                  &gt;
                    &lt;path d=&quot;M0 11c.511-6.158 5.685-11 12-11s11.489 4.842 12 11h-2.009c-.506-5.046-4.793-9-9.991-9s-9.485 3.954-9.991 9h-2.009zm21.991 2c-.506 5.046-4.793 9-9.991 9s-9.485-3.954-9.991-9h-2.009c.511 6.158 5.685 11 12 11s11.489-4.842 12-11h-2.009z&quot; /&gt;
                  &lt;/svg&gt;
                &lt;/&gt;
              ) : (
                &lt;span&gt;Save&lt;/span&gt;
              )}
            &lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default InventoryPage;
  </code></pre>
  <p>Currently when hitting submit, the form itself is just refreshing the page, and it's not using the onSubmit constant. I'm not sure what's going on, love some help :)</p>
  <h2>Sandbox link, code is compiling but probably easier to vet the code itself</h2>
  <p><a href="https://codesandbox.io/s/using-tailwind-with-nextjs-forked-nnr0l?file=/pages/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/using-tailwind-with-nextjs-forked-nnr0l?file=/pages/index.js</a></p>