How to handle react state and pros update appropriately with reducer

I am new in react and I have been trying to make a setting page with reactjs. What I am trying to achieve is, when user loads page for the first time I want the setting page attributes to be loaded from react component state as there wont be any setting available, When users submits the data and the page is rendered second time those setting attributes should now be loaded from props that comes from redux-saga. I have written code as under

    import React, { Component } from 'react';

    class Setting extends Component {

        constructor(props) {
            super(props)
            this.state = {
                settings_1: {},
                settings_2: {
                    child_one: {
                        subchild_one:true,
                        subchild_two:true
                    }
                }
            }
        }

        componentDidMount() {
            this.props.activateAuthLayout();
            if (this.props.user !== null && this.props.user.shop_id) {
                this.props.loadSettings({
                    payload: { ...this.props.user},
                });
            }

        }

        handleChange = (event) => {
            let data = {[event.target.name]: value= [event.target.value]};
            let newState = { ...this.state.settings_2.child_one, data };
            this.setState({settings_2: newState });
        }


        render() {

            if(!this.props.is_settings_loaded){
                return (
                    <div>loading...</div>
                )
            }

            return (
                <div className="content">
                    <div className="custom-control custom-checkbox mb-0">
                        <input
                            type="checkbox"
                            className="custom-control-input"
                            id="checkbox1"
                            name="child_one"
                            checked={this.props.settings.settings_2.child_one.subchild_one || this.state.settings_2.child_one.subchild_two}
                            onChange={e => this.handleChange(e)}
                        />
                        <label className="custom-control-label font-weight-normal darktextcolor" htmlFor="sync_all_product_attributes">Select All</label>
                    </div>
                </div>

            );
        }

    }

    const mapStatetoProps = state => {
        const { user } = state.Common;
        const { settings, is_settings_loaded } = state.Settings;
        return { user, settings, is_settings_loaded };
    }

    export default withRouter(connect(mapStatetoProps, { activateAuthLayout, loadSettings, updateSettings })(Setting));

Everything is working, except, when there is setting available on props and I want to unchecked the checkbox, it is never unchecked. I found that is because now i have props and that is not changed. How can I handle such scenario ?

I tried with defaultChecked instead of checked but I have select all checkbox, which will not work if I use defaultCheck.

Any kind of suggestion are highly appreciated. Thanks