React input checkbox checked

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 checked and put my initial theme(which is coming from my redux store), then in my handleChange I did, if the event target has dark then dispatch the dark theme. But nothing happening in that handle change. don't know what i am doing wrong.

Here is my toggle component

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 { "appSettings": appSettingState } = useSelector((state: TRootState) => state);
  const { theme } = appSettingState || {};
  console.log(theme); // inital state which is "light". 

  return (
    <>
      {/*  This input checkbox  does not work */}
      <CheckBoxWrapper>
        <CheckBox
          onChange={(e) => { // This function does not work
            e.target.value === `dark` ?
              dispatch(appSettings?.actions?.enableDarkTheme()) :
              dispatch(appSettings?.actions?.enableLightTheme());
          }}
          id="toggleSwitch"
          type="checkbox"
          Checked={theme === `light`}
        />
        <CheckBoxLabel htmlFor="toggleSwitch" />
      </CheckBoxWrapper>
      <br></br>

      {/*  THIS SELECT OPTIONS WORK FINE. AND I CAN GET DARK AND LIGHT THEME */}
      <h2>Theme</h2>
      <select
        name="theme"
        id="theme-select"
        value={theme}
        onChange={(e) => {
          if (e.target.value === `dark`) {
            dispatch(appSettings?.actions?.enableDarkTheme());
          } else {
            dispatch(appSettings?.actions?.enableLightTheme());
          }
        }}
      >
        <option value="dark">Dark</option>
        <option value="light">Light</option>
      </select>
    </>
  );
}

// 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;
  &::after {
    content: "";
    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;
  &:checked + ${CheckBoxLabel} {
    background: #4fbe79;
    &::after {
      content: "";
      display: block;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      margin-left: 21px;
      transition: 0.2s;
    }
  }
`;