title: React input checkbox checked
body: <p>I have use React-redux and styled components for my app. I store my initial state theme as a string which is light and dark. then I connect my styled components intial light theme and dark theme in my root app. My dark mood works fine when i used select options but when i used input checkbox it does not work. I never used input checkbox, after reading couple example I used <code>checked</code> and put my initial theme(which is coming from my redux store), then in my handleChange I did,  if the <code>event target has dark</code> then dispatch the dark theme. But nothing happening in that handle change. don't know what i am doing wrong.</p>
  <p><strong>Here is my toggle component</strong></p>
  <pre><code>import React, { useState } from 'react';
  import styled from 'styled-components';
  import { useDispatch, useSelector } from 'react-redux';
  import { appSettings } from '../../state/appSettings';
  import { TRootState } from '../../state/index';
  
  export default function Toggle({ }: IProp) {
    const dispatch = useDispatch();
    const { &quot;appSettings&quot;: appSettingState } = useSelector((state: TRootState) =&gt; state);
    const { theme } = appSettingState || {};
    console.log(theme); // inital state which is &quot;light&quot;. 
  
    return (
      &lt;&gt;
        {/*  This input checkbox  does not work */}
        &lt;CheckBoxWrapper&gt;
          &lt;CheckBox
            onChange={(e) =&gt; { // This function does not work
              e.target.value === `dark` ?
                dispatch(appSettings?.actions?.enableDarkTheme()) :
                dispatch(appSettings?.actions?.enableLightTheme());
            }}
            id=&quot;toggleSwitch&quot;
            type=&quot;checkbox&quot;
            Checked={theme === `light`}
          /&gt;
          &lt;CheckBoxLabel htmlFor=&quot;toggleSwitch&quot; /&gt;
        &lt;/CheckBoxWrapper&gt;
        &lt;br&gt;&lt;/br&gt;
  
        {/*  THIS SELECT OPTIONS WORK FINE. AND I CAN GET DARK AND LIGHT THEME */}
        &lt;h2&gt;Theme&lt;/h2&gt;
        &lt;select
          name=&quot;theme&quot;
          id=&quot;theme-select&quot;
          value={theme}
          onChange={(e) =&gt; {
            if (e.target.value === `dark`) {
              dispatch(appSettings?.actions?.enableDarkTheme());
            } else {
              dispatch(appSettings?.actions?.enableLightTheme());
            }
          }}
        &gt;
          &lt;option value=&quot;dark&quot;&gt;Dark&lt;/option&gt;
          &lt;option value=&quot;light&quot;&gt;Light&lt;/option&gt;
        &lt;/select&gt;
      &lt;/&gt;
    );
  }
  
  // This toogle input styled
  const CheckBoxWrapper = styled.div`
  position: fixed;
  top:10px;
  right:10px;
  `;
  
  const CheckBoxLabel = styled.label`
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 26px;
    border-radius: 15px;
    background: #bebebe;
    cursor: pointer;
    &amp;::after {
      content: &quot;&quot;;
      display: block;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      margin: 3px;
      background: #ffffff;
      box-shadow: 1px 3px 3px 1px rgba(0, 0, 0, 0.2);
      transition: 0.2s;
    }
  `;
  const CheckBox = styled.input`
    opacity: 0;
    z-index: 1;
    border-radius: 15px;
    width: 42px;
    height: 26px;
    &amp;:checked + ${CheckBoxLabel} {
      background: #4fbe79;
      &amp;::after {
        content: &quot;&quot;;
        display: block;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        margin-left: 21px;
        transition: 0.2s;
      }
    }
  `;
  </code></pre>