title: Radio buttons not toggling, checked or highlighted
body: <pre><code>import React, { useState, useEffect, Fragment } from &quot;react&quot;;
  import Button from &quot;../../../Resources/Forms/Button&quot;;
  import Switch from &quot;../../../Resources/Forms/Switch&quot;;
  import { POST } from &quot;../../../Utils/api&quot;;
  import Radio from &quot;../../../Resources/Forms/Radio&quot;;
  import withAppData from &quot;../../../HOC/withAppData&quot;;
  
  const InventorySettings = (props) =&gt; {
      const [state, setState] = useState({});
      const [isSaving, setIsSaving] = useState();
      const [isStockRequestChecked, setIsStockRequestChecked] = useState(false);
  
      const getStatus = id =&gt; {
          return props.context.isSettingsActivated(id) ? 1 : 0;
      };
  
      const setBusinessSettings = async () =&gt; {
          const defaultSettings = [
              { state: &quot;enableStockRequest&quot;, id: 53 },
              { state: &quot;connectWarehousePickStock&quot;, id: 52 },
              { state: &quot;approveRequestOtp&quot;, id: 51 },
              { state: &quot;approveRequestManually&quot;, id: 50 }
          ];
          for (const setting of defaultSettings) {
              await setState({ [setting.state]: getStatus(setting.id) });
          }
      };
  
      function chooseApprovalMethod(methodType) {
          const currentValue = state[methodType];
          setState({[methodType]
              : currentValue === 1 ? 0: 1})
      }
  
      async function saveApprovalMethod() {
          setIsSaving(true)
          const approvalSettings = [{text:&quot;approvalRequestManually&quot;, id: 51}, {text:&quot;approveRequestOtp&quot;, id: 50}]
          for(const el of approvalSettings) {
              const currentValue = state[el.text];
              const data = {
                  settingId: el.id,
                  status: currentValue
              }
             await POST(`Common/AddBusinessSetting`, data);
      }
          setIsSaving(false);
          props.context.getBusinessSettings();
      }
  
      const updateBasicSettings = async (id, key) =&gt; {    
          setState({ [key]: !state[key] ? 1 : 0 });
              const data = {
                  SettingId: id,
                  Status: state[key],
              };
              await POST(`Common/AddBusinessSetting`, data);
              props.context.getBusinessSettings();
      };
  
      useEffect(() =&gt; {
          setBusinessSettings();
      }, []);
  
      return (
          &lt;Fragment&gt;
          &lt;div className=&quot;basic-settings-section&quot;&gt;
              &lt;Switch
                  label={&quot;Connect Warehouse Stock to pick stock&quot;}
                  light={true}
                  checked={state &amp;&amp; state.connectWarehousePickStock === 1}
                  onChange={() =&gt; updateBasicSettings(52, &quot;connectWarehousePickStock&quot;)}
              &gt;&lt;/Switch&gt;
          &lt;/div&gt;
          &lt;div className=&quot;basic-settings-section&quot;&gt;
              &lt;Switch
                  label={&quot;Stock Request&quot;}
                  light={true}
                  checked={isStockRequestChecked}
                  onChange={() =&gt; setIsStockRequestChecked(!isStockRequestChecked)}
              &gt;&lt;/Switch&gt;
              {isStockRequestChecked &amp;&amp; (
                  &lt;div className=&quot;basic-settings-plan-generate&quot;&gt;
                      &lt;div
                          className=&quot;form__label&quot;
                          style={{ padding: &quot;2px&quot;, marginBottom: &quot;20px&quot; }}
                      &gt;
                          &lt;p&gt;Please choose an approval method&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;Radio
                          label={&quot;Manual Approval&quot;}
                          name=&quot;approval&quot;
                          value=&quot;50&quot;
                          id=&quot;50&quot;
                          checked={state &amp;&amp; state.approveRequestManually === 1}
                          // onChange={() =&gt; (chooseApprovalMethod)}
                      /&gt;
                      &lt;Radio
                          label={&quot;OTP Approval&quot;}
                          name=&quot;approval&quot;
                          value=&quot;51&quot;
                          id=&quot;51&quot;
                          checked={state &amp;&amp; state.approveRequestOtp === 1}
                          // onChange={() =&gt; (chooseApprovalMethod)}
                      /&gt;
                      &lt;div className=&quot;password-settings-btn&quot;
                          // onClick={props.context.showToast}
                      &gt;
                          &lt;Button
                              type={&quot;outline&quot;}
                              size={&quot;medium&quot;}
                              text={&quot;Save&quot;}
                              disabled={!state.approveRequestOtp &amp;&amp; !state.approveRequestManually}
                              withMargin={false}
                              loading={isSaving}
                              onClick={saveApprovalMethod}
                          &gt;&lt;/Button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              )}
          &lt;/div&gt;
      &lt;/Fragment&gt;
      );
  }
  export default withAppData(InventorySettings);
  </code></pre>
  <p>I added the chooseApprovalMethod function to the radio buttons but still I wasn't getting it well. So I had to call there state using state.text is equal to 1. Please help me out I don't think I know what I'm doing anymore.</p>
  <p>Please above are my code, the radio buttons aren't checking or highlighting, so I want them to be checked when clicked on, and I want there ids to be saved when clicking on the save button.</p>
  <p>So please guys help me out, as I don't understand it anymore.</p>