保存时无法保持复选框选中

Question

Issue: Every time I refresh the page, the previously checked boxes get unchecked. I have 4 checkboxes. I checked two and then I refresh. The other two wont save. Im not sure what's wrong here. Could you please point my mistake. Much Appreciated.

const handleCheckboxChange = ([event]) => {
    return event.target.checked;
  };

  const organizationInfo = {
    // label name, variable name, value
    "Organization Name": ["name", name],
    "Organization Contact E-mail": ["email", email],
  };

 const renderNeedSection = () => {
    if (organization) {
      return (
        <div>
          {Object.entries(NEEDS).map(([key, label]) => (
            <CheckBoxWrapper key={key}>
              <Controller
                as={Checkbox}
                defaultChecked={needs[key]}
                name={`needs.${key}`}
                control={control}
                onChange={handleCheckboxChange}
              >
                <Label inputColor="#000000">{label}</Label>
              </Controller>
            </CheckBoxWrapper>
          ))}
          <span style={errorStyles}>
            {errors.needs ? "Please select at least one option" : ""}
          </span>
        </div>
      );
    }
  };

Answer 1

React state isn't persisted across reloads. If you want your data to persist you have among other options

1. Store it in a server and retrieve it when the page loads
2. Use the browser localStorage