react hooks: remember me checkbox in Login form not working

I have a login form functional component built using react-hooks comprising of userid, password and rememberMe checkbox.

For some reason, the checkbox is not working as in, when I click on it, it does tick or untick. Which is basically its state is not changing.

userid, password and rememberMe checkbox needs to be sent to the backend. That's why I have to couple it with inputs. If it was an independent checkbox than it would have been easy.

I have handleChange() for userid, password and I have handleChechbox() for handling checkbox.

Below is the complete code.

const Login = (props) => { const [inputs, setInputs] = useState({ userid: "", password: "", rememberPassword: false, }); const [submitted, setSubmitted] = useState(false); const { userid, password, rememberPassword } = inputs;

  // reset login status
  useEffect(() => {
    dispatch(loginActions.logout());
  }, []);

  function handleChange(e) {
    const { name, value } = e.target;
    setInputs((inputs) => ({ ...inputs, [name]: value }));
  }

  function handleChechbox(e) {
    const { name, value } = e.target;
    console.log("eeeeee check", e.target.type);
    console.log("eeeeee check", e.target.checked);
    console.log("eeeeee check inputs", inputs);
    console.log("eeeeee check inputs remember", inputs.rememberPassword);
    if (e.target.type === "checkbox" && !e.target.checked) {
      setInputs((inputs) => ({ ...inputs, [name]: "" }));
    } else {
      setInputs((inputs) => ({ ...inputs, [name]: value }));
    }
  }

  function handleSubmit(e) {
    e.preventDefault();
    setSubmitted(true);
    if (inputs) {
      // get return url from location state or default to home page
      const { from } = location.state || {
        from: { pathname: "/admin/summary" },
      };
      dispatch(loginActions.login(inputs, from));
      // props.history.push("/admin/summary");
    }
  }

  return (
    <div className="Login">
      <div className="login-form-container">
        <div className="content">
          <Form className="login-form" onSubmit={handleSubmit}>
            <InputGroup>
              <InputGroupAddon
                className="input-group-addon"
                addonType="prepend"
              >
                <i className="fa fa-user"></i>
              </InputGroupAddon>
              <input
                autoFocus
                type="email"
                aria-label="Username"
                aria-describedby="Username"
                aria-invalid="false"
                placeholder="Username or Email"
                name="userid"
                value={userid}
                onChange={handleChange}
                className={
                  "form-control" + (submitted && !userid ? " is-invalid" : "")
                }
              />
              {submitted && !userid && (
                <div className="invalid-feedback">
                  Username or Email is required
                </div>
              )}
            </InputGroup>
            <InputGroup>
              <InputGroupAddon
                className="input-group-addon"
                addonType="prepend"
              >
                <i className="fa fa-lock"></i>
              </InputGroupAddon>
              <input
                type="password"
                name="password"
                placeholder="Password"
                aria-label="password"
                aria-describedby="password"
                value={password}
                onChange={handleChange}
                className={
                  "form-control" + (submitted && !password ? " is-invalid" : "")
                }
              />
              {submitted && !password && (
                <div className="invalid-feedback">Password is required</div>
              )}
            </InputGroup>
            <div className="form-actions">
              <br />
              <div className="form-check">
                <input
                  type="checkbox"
                  className="form-check-input"
                  id="rememberPassword"
                  name="checkbox"
                  checked={rememberPassword}
                  onChange={handleChechbox}
                  // required
                />
                <label className="form-check-label" for="rememberPassword">
                  Remember me
                </label>
              </div>
            </div>
          </Form>
        </div>
      </div>
    </div>
  );
};