Reactのダイアログ画面のチェックボックスに関する問題

Reactのダイアログ画面のチェックボックスに関する問題で質問があります。
現在、Reactのダイアログ画面のチェックボックスを作成しているのですが、その仕様は次のとおりです。

①ダイアログ画面のconstructorで各チェックボックスのチェック有無（true or false）のデータを初期化（true）する。

②ダイアログ画面のcomponentDidMount()でlocalStorageに保存している各チェックボックスのチェック有無（true or false）のデータを読み込む。

③localStorageに保存している各チェックボックスのチェック有無（true or false）のデータがあれば、そのデータでダイアログ画面の各チェックボックスのチェック有無（true or false）のデータを更新する。

④localStorageに保存している各チェックボックスのチェック有無（true or false）のデータが無いならば、ダイアログ画面の各チェックボックスのチェック有無（true or false）のデータは初期化したままにする。

⑤ダイアログ画面のCancelボタンを押すと、ダイアロブ画面で更新したチェックボックスのチェック有無（true or false）のデータはそのままにしておいて、localStorageに保存している各チェックボックスのチェック有無（true or false）のデータを更新しないでチェックボックスを閉じる。

⑥ダイアログ画面のUpdateボタンを押すと、ダイアロブ画面で更新したチェックボックスのチェック有無（true or false）のデータはそのままにしておいて、componentDidUpdate(prevProps)関数を実行してlocalStorageに保存している各チェックボックスのチェック有無（true or false）のデータを更新してチェックボックスを閉じる。

上記のロジックでダイアログ画面のチェックボックスを作成すれば、
・localStorageに保存している各チェックボックスのチェック有無（true or false）のデータがダイアログ画面を開いたときのチェックボックススのチェック有無（true or false）データに反映する。
・Cancelボタンを押せば、localStorageに保存している各チェックボックスのチェック有無（true or false）のデータが更新視されない。
となるので、意図したものができるはずです。

ところが、実際に作ってみると、

問題①Cancelボタンを押してもlocalStorageに保存している各チェックボックスのチェック有無（true or false）のデータが更新されてしまう。

問題②ダイアログ画面でUpdateした後、再度ダイアログ画面を立ち上げると、原画面をリロードしたときに立ち上げたダイアログ画面が表示されてしまう。つまり、localStorageに保存している各チェックボックスのチェック有無（true or false）のデータがダイアログ画面の各チェックボックスに反映しない。

といった問題が生じています。
原因は、ダイアログ画面の制御構造にあると思われます。どなたか、ダイアログ画面に詳しい方教えて頂けないでしょうか。

よろしくお願いします。

環境は次のとおりです。

・OS：Windows10
・React；不明

尚、ダイアログ画面の該当部分のソースコードを編集して掲載します。
ソースコードについて質問があれば、コメントください。
それでは、よろしくお願いします。

Javascript
1const list = [];
2const color = [];
3
4class EditPlanningsumDialog extends Component {
5    constructor(props) {
6        super(props);
7        this.componentDidMount = this.componentDidMount.bind(this);
8        this.componentDidUpdate = this.componentDidUpdate.bind(this);
9        this.state = {
10        };
11        aaaaaaaa.map(label => {
12            this.state["xxxxxxxx_" + label.model_name] = true;
13        });
14        bbbbbbbb.map(label => {
15            this.state["yyyyyyyy_" + label.model_name] = true;
16        });
17    }
18
19    componentDidMount(){
20        for(let key in this.state ){
21            const value = JSON.parse(window.localStorage.getItem(key));
22            if (value != null){
23                this.state[key] = value;
24            }else{
25                window.localStorage.setItem(key, this.state[key]);
26            }
27        };
28
29        for (let i in aaaaaaaa) {
30            list.push(
31                <FormControlLabel
32                    control={
33                        <Checkbox
34                            id={"xxxxxxxx_" + aaaaaaaa[i].model_name}
35                            name="items"
36                            value={"xxxxxxxx_" + aaaaaaaa[i].model_name}
37                            color="primary"
38                            defaultChecked={this.state["xxxxxxxx_" + aaaaaaaa[i].model_name]}
39                            onChange={(e, defaultChecked) => this.state["xxxxxxxx_" + aaaaaaaa[i].model_name] = defaultChecked}
40                        />
41                    }
42                    label={aaaaaaaa[i].caption}
43                />
44            );
45        }
46
47        for (let i in bbbbbbbb) {
48            color.push(
49                <FormControlLabel
50                    control={
51                        <Checkbox
52                            id={"yyyyyyyy_" + bbbbbbbb[i].model_name}
53                            name="items"
54                            value={"yyyyyyyy_" + bbbbbbbb[i].model_name}
55                            color="primary"
56                            defaultChecked={this.state["yyyyyyyy_" + bbbbbbbb[i].model_name]}
57                            onChange={(e, defaultChecked) => this.state["yyyyyyyy_" + bbbbbbbb[i].model_name] = defaultChecked}
58                        />
59                    }
60                    label={aaaaaaaa[i].caption}
61                />
62            );
63        }
64    }
65
66    componentDidUpdate(prevProps){
67        for(let key in this.state ){
68            window.localStorage.setItem(key, this.state[key]);
69        };
70    }
71
72    handleCheckboxUpdate() {
73        for(let key in this.state ){
74            this.setState  = ({key: this.state[key]});
75        }
76    }
77