Unable to presist the checkboxes

I am unable to persist the check boxes when i have changed the component and came return back...just i want to persist the checked check box

this is the link of codesand box : https://codesandbox.io/s/thirsty-shadow-6fmv0?file=/src/components/branches.js:0-2294...please see above link in code sand box...

courses.js

import React, { Component } from "react";
import Checkbox from "@material-ui/core/Checkbox";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import { List, ListItem } from "@material-ui/core";
import Button from "react-bootstrap/Button";

// const [isChecked, setIsChecked] = useState(true);
class CheckboxComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      values: {},
      count: 0,
      checked: true
    };
    this.ChangeCheckBox = this.ChangeCheckBox.bind(this);
    this.checkBoxSubmit = this.checkBoxSubmit.bind(this);
  }
  ChangeCheckBox = e => {
    let checked = e.target.checked;
    let { count } = this.state;
    let value = this.state.values;
    if (checked) {
      // console.log("checked");
      count++;
      this.setState({
        checked
      });
    } else {
      // console.log("un-checked");
      count--;
    }
    this.setState({ count });
    // console.log(count);
    // console.log(checked);
    // console.log(value);

    value[e.target.value] = e.target.checked;
    this.setState({ values: value });
  };
  checkBoxSubmit = e => {
    let CheckedValues = this.state.values;
    e.preventDefault();
    console.log(CheckedValues);
  };
  render() {
    const arr = ["Course 1", "Course 2", "Course 3"];
    return (
      <React.Fragment>
        <form onSubmit={this.checkBoxSubmit}>
          <FormGroup aria-label="position" row>
            <List className="courses-college-regis">
              {arr.map((a, key) => (
                <ListItem button key={key}>
                  <FormControlLabel
                    label={a}
                    type="checkbox"
                    value={a}
                    name={a}
                    control={<Checkbox color="primary" />}
                    onChange={this.ChangeCheckBox}
                  />
                </ListItem>
              ))}
            </List>
          </FormGroup>
          count:{this.state.count}
          <br />
          <Button type="submit" variant="primary">
            Submit
          </Button>
        </form>
      </React.Fragment>
    );
  }
}

export default CheckboxComponent;

branch.js

import React, { Component } from "react";
import Checkbox from "@material-ui/core/Checkbox";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import { List, ListItem } from "@material-ui/core";
import Button from "react-bootstrap/Button";

// const [isChecked, setIsChecked] = useState(true);
class BranchComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      values: {},
      count: 0,
      checked: true
    };
    this.ChangeCheckBox = this.ChangeCheckBox.bind(this);
    this.checkBoxSubmit = this.checkBoxSubmit.bind(this);
  }
  ChangeCheckBox = e => {
    let checked = e.target.checked;
    let { count } = this.state;
    let value = this.state.values;
    if (checked) {
      // console.log("checked");
      count++;
      this.setState({
        checked
      })
    } else {
      // console.log("un-checked");
      count--;
    }
    this.setState({ count });
    // console.log(count);
    // console.log(checked);
    // console.log(value);

    value[e.target.value] = e.target.checked;
    this.setState({ values: value });
  };
  checkBoxSubmit = e => {
    let CheckedValues = this.state.values;
    e.preventDefault();
    console.log(CheckedValues);
    localStorage.setItem('this.state.values', CheckedValues)
  };
  render() {
    const arr = ["Branch 1", "Branch 2", "Branch 3"];
    return (
      <React.Fragment>
        <form onSubmit={this.checkBoxSubmit}>
          <FormGroup aria-label="position" row>
            <List className="courses-college-regis">
              {arr.map((a, key) => (
                <ListItem button key={key}>
                  <FormControlLabel
                    label={a}
                    type="checkbox"
                    value={a}
                    name={a}
                    control={<Checkbox color="primary" />}
                    onChange={this.ChangeCheckBox}
                  />
                </ListItem>
              ))}
            </List>
          </FormGroup>
          count:{this.state.count}
          <br />
          <Button type="submit" variant="primary">
            Submit
          </Button>
        </form>
      </React.Fragment>
    );
  }
}

export default BranchComponent;