why checkbox is not checked in react js?

Question

I am using react final form but I am not able to checked the checkbox. I do not know what I am doing wrong. Here is my Code

const AppWithIconToggle = ({ input }) => {
  console.log("ddd", !!input.value);
  return (
    <div>
      <SForm.Checkbox
        checked={!!input.value}
        name={input.name}
        toggle
        onChange={(e, { checked }) => input.onChange(checked)}
      />
    </div>
  );
};

Answer 1

It's because the checked property of your SForm.Checkbox receives undefined. You are passing a wrong property (input.value) which is undefined so !!undefined is always false. Change it to input.checked then it works as expected:

const AppWithIconToggle = ({ input }) => {
  return (
    <div>
      <SForm.Checkbox
        checked={!!input.checked}
        name={input.name}
        toggle
        onChange={(e, { checked }) => input.onChange(checked)}
      />
    </div>
  );
};

Answer 2

As @Sirwan mentioned. your !!undefined is always return false

Try using useState hook

// import 'useState'
import React, { useState } from "react"

const AppWithIconToggle = ({ input }) => {
  // initial check value is 'false'
  const [checked, setChecked] = useState(false)
  console.log(checked)
  return (
    <div>
      <SForm.Checkbox
        checked={checked} // checked value
        name={input.name}
        toggle
        onChange={() => setChecked(!checked)} // toggle checked value onChange
      />
    </div>
  )
}

Check your codeSandbox