title: Material-UI checkbox with react-hook-form V7 won't sent correct value when the cheked value is changed via logic
body: <p>I'm using react-hook-form V7.14.2 and I'm using a Material-UI checkbox that can be checked by the user manually or will be automatically checked depending on the values of certain inputs.
  This is working OK.</p>
  <p>The issue is that when submitting the form, if the check box was checked via logic, depending on the values of certain input, the value sent to the back end will be false.
  If the user manually checks the check box, then it will send the correct value. -True if checked-.</p>
  <p>I read the documentation to migrate from V6 to V7 in react-hook-form page, as I was previously using V6 and the code works there.
  <a href="https://react-hook-form.com/migrate-v6-to-v7/" rel="nofollow noreferrer">https://react-hook-form.com/migrate-v6-to-v7/</a></p>
  <p>I also read some previous answers in Stackoverflow such as this one: <a href="https://stackoverflow.com/questions/66453383/material-ui-checkbox-with-react-hook-form">material-ui checkbox with react-hook-form</a> but with no success.</p>
  <p>Here is my code:</p>
  <pre><code>import React, { useContext, useState, useEffect } from &quot;react&quot;;
  import Checkbox from &quot;@material-ui/core/Checkbox&quot;;
  import { FontAwesomeIcon } from &quot;@fortawesome/react-fontawesome&quot;;
  import { faCheckCircle } from &quot;@fortawesome/free-solid-svg-icons&quot;;
  import FormControlLabel from &quot;@material-ui/core/FormControlLabel&quot;;
  import { Controller, set } from &quot;react-hook-form&quot;;
  import { makeStyles } from &quot;@material-ui/core/styles&quot;;
  import { DarkThemeContext } from &quot;../../context/DarkThemeContext&quot;;
  import { useStylesSelectPropDetails } from &quot;../../styledComponent/SelectPropDetailsStyled&quot;;
  import { IMAGES_LINK } from &quot;../../api/doFetch&quot;;
  
  const useStylesLabel = makeStyles((theme) =&gt; ({
    label: {
      fontSize: &quot;1em&quot;,
      fontFamily: &quot;Open Sans Hebrew, sans-serif !important&quot;,
      fontWeight: 400,
      lineHeight: 1.5,
    },
  }));
  
  const CheckboxPropDetails = ({
    register,
    name,
    label,
    checked,
    isShelter,
    isElevator,
  }) =&gt; {
    const classesLabel = useStylesLabel();
    const [isDarkTheme] = useContext(DarkThemeContext);
    const [isChecked, setIsChecked] = useState(false);
    const props = { isDarkTheme: isDarkTheme };
    const classes = useStylesSelectPropDetails(props);
  
    const handleChange = (event) =&gt; {
      setIsChecked(event.target.checked);
    };
  
    useEffect(() =&gt; {
      if (name === &quot;shelter&quot;) {
        if (  isShelter,) {
          setIsChecked(true);
        } else setIsChecked(false);
      }
      if (name === &quot;elevator&quot;) {
        console.log(&quot;elevator&quot;);
  
        if (isElevator) {
          console.log(&quot;isElevator&quot;, isElevator);
          setIsChecked(true);
        } else setIsChecked(false);
      }
    }, [  isShelter, isElevator]);
  
    return (
      &lt;&gt;
        &lt;FormControlLabel
          classes={classesLabel}
          control={
            &lt;Checkbox
              name={name}
              id={name}
              defaultChecked={checked ? checked : false}
              {...register(name)}
              color=&quot;primary&quot;
              size={&quot;medium&quot;}
              icon={
                &lt;img
                  src={`${IMAGES_LINK}/dashboard/elements/rec.svg`}
                  alt=&quot;Circle&quot;
                  style={{ width: 20, height: 20 }}
                /&gt;
              }
              disableRipple
              checkedIcon={
                &lt;FontAwesomeIcon
                  icon={faCheckCircle}
                  style={{ width: 20, height: 20 }}
                /&gt;
              }
              checked={isChecked}
              onChange={(e) =&gt; handleChange(e)}
            /&gt;
          }
          labelPlacement=&quot;end&quot;
          label={&lt;p className={classes.paragraphAddProp}&gt;{label}&lt;/p&gt;}
        /&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>Code used with V6 on react-hook-form:</p>
  <pre><code>import React, { useContext, useState, useEffect } from &quot;react&quot;;
  import Checkbox from &quot;@material-ui/core/Checkbox&quot;;
  import { FontAwesomeIcon } from &quot;@fortawesome/react-fontawesome&quot;;
  import { faCheckCircle } from &quot;@fortawesome/free-solid-svg-icons&quot;;
  import FormControlLabel from &quot;@material-ui/core/FormControlLabel&quot;;
  import { Controller } from &quot;react-hook-form&quot;;
  import { makeStyles } from &quot;@material-ui/core/styles&quot;;
  import { DarkThemeContext } from &quot;../../context/DarkThemeContext&quot;;
  import { useStylesSelectPropDetails } from &quot;../../styledComponent/SelectPropDetailsStyled&quot;;
  import { IMAGES_LINK } from &quot;../../api/doFetch&quot;;
  
  const useStylesLabel = makeStyles((theme) =&gt; ({
    label: {
      fontSize: &quot;1em&quot;,
      fontFamily: &quot;Open Sans Hebrew, sans-serif !important&quot;,
      fontWeight: 400,
      lineHeight: 1.5,
    },
  }));
  
  const CheckboxPropDetails = ({
    register,
    name,
    label,
    checked,
    isShelter,
    isElevator,
  }) =&gt; {
    const classesLabel = useStylesLabel();
    const [isDarkTheme] = useContext(DarkThemeContext);
    const props = { isDarkTheme: isDarkTheme };
    const classes = useStylesSelectPropDetails(props);
    const [isChecked, setIsChecked] = useState(false);
  
    const handleChange = (event) =&gt; {
      console.log(&quot;event&quot;, event.target.checked);
      setIsChecked(event.target.checked);
    };
  
    useEffect(() =&gt; {
      if (name === &quot;shelter&quot;) {
        if (isShelter) {
          setIsChecked(true);
        } else setIsChecked(false);
      }
      if (name === &quot;elevator&quot;) {   
        if (isElevator) {
             setIsChecked(true);
        } else setIsChecked(false);
      }
    }, [isShelter, isElevator]);
  
    return (
      &lt;&gt;
        &lt;FormControlLabel
          classes={classesLabel}
          control={
            &lt;Checkbox
              name={name}
              defaultChecked={checked ? checked : false}
              inputRef={register}
              color=&quot;primary&quot;
              size={&quot;medium&quot;}
              icon={
                &lt;img
                  src={`${IMAGES_LINK}/dashboard/elements/rec.svg`}
                  alt=&quot;Circle&quot;
                  style={{ width: 20, height: 20 }}
                /&gt;
              }
              disableRipple
              checkedIcon={
                &lt;FontAwesomeIcon
                  icon={faCheckCircle}
                  style={{ width: 20, height: 20 }}
                /&gt;
              }
              checked={isChecked}
              onChange={(e) =&gt; handleChange(e)}
            /&gt;
          }
          labelPlacement=&quot;end&quot;
          label={&lt;p className={classes.paragraphAddProp}&gt;{label}&lt;/p&gt;}
        /&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>Control, register, and so are being pass as props from another component.</p>
  <p>As mention before, it's working on V6.
  The difference in V6 and V7 is one line:</p>
  <p>in V6</p>
  <pre><code>  inputRef={register}
  </code></pre>
  <p>in V7</p>
  <pre><code>  {...register(name)}
  </code></pre>
  <p>How could I make it so that when the checked value is change via logic that it will register and on submit will be send to the backend as true?</p>