How to check Material UI checkbox Manually?

I am trying to check the checkbox in componentDidUpdate by setting the "checked" to true but it's not working.

My State is stored in redux, I update the checkbox state in "onChange()" and in componentDidUpdate, I check if the state value is true or false based on which I am adding and removing the "checked" attribute. but this doesn't seem to work

    import React, { Component } from "react";
    import { saveOptions, getOptions } from '../api'
    import { connect } from 'react-redux';
    import { setUploadeSettings } from '../actions/settings'

    import { Button, Checkbox, FormControl, TextField, withStyles } from '@material-ui/core/';

    const styles = theme => ({
        root: {
            padding: theme.spacing(2)
        },
        button: {
            marginTop: theme.spacing(1)
        }
    })


    class UploadSettings extends Component{

        async componentDidMount(){
            const settingsFields = [...this.form.elements].map(i => i.name).filter(i => i)
            let savedOptions = await getOptions( { option_names: settingsFields } )
            savedOptions = savedOptions.data.data;
            const reduxState = {} 
            savedOptions.forEach(i =>  reduxState[i.option_name] = i.option_value );
            this.props.setUploadeSettings(reduxState)
        }

        componentDidUpdate(prevProps){
            if(prevProps.uploadSettings !== this.props.uploadSettings){
                [...this.form.elements].forEach(i => {
                    if(i.name === "convert_web_res") 
                       this.props.convert_web_res ? i.setAttribute("checked", true) : i.removeAttribute('checked') //<- This Doesn't Seem to work
                    i.value = this.props.uploadSettings[i.name]
                })
            }
        }

        handleSubmit = async  (e) => {
            e.preventDefault();
            try{
                const formData = new FormData(e.target);
                const elements = [...e.target.elements]
                const eleIndex = elements.findIndex(i => i.name === 'convert_web_res')
                const checked = elements[eleIndex].checked;
                formData.set('convert_web_res', checked);
                await saveOptions(formData)
            } catch(e){
                console.error(e)
            }
        }

        render(){
            const { classes, uploadSettings, setUploadeSettings } = this.props;
            return(
                <div className={classes.root}>
                    <form onSubmit={this.handleSubmit} ref={(form) => this.form = form}>
                        <FormControl>
                            <label>
                                <Checkbox 
                                    color="primary" 
                                    name="convert_web_res"
                                    onChange={(e) => {
                                        const state = uploadSettings;
                                        state.convert_web_res = e.target.checked
                                        setUploadeSettings(state)
                                    }}
                                /> Convert Web Resolution
                            </label>
                            <TextField
                                defaultValue = {uploadSettings.resolution}
                                id="resolution"
                                name="resolution"
                                label="Resolution"
                                margin="normal"
                            />
                            <TextField
                                defaultValue = {uploadSettings.dpi}
                                id="dpi"
                                name="dpi"
                                label="DPI"
                                margin="normal"
                            />
                            <Button type="submit" variant="contained" color="primary" className={classes.button}>
                                Save
                            </Button>
                        </FormControl>
                    </form>
                </div>
            )
        }
    }

    const mapStateToProps = state => {
        return {
          uploadSettings: state.settings.upload_settings
        }
      }

      const mapDispatchToProps = dispatch => {
        return {
            setUploadeSettings: settings => dispatch(setUploadeSettings(settings))
        }
      }

      export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(UploadSettings));

The Goal is to set the default value of the checkbox.

I tried adding the "checked" attribute directly on my checkbox component, Like so

<label>
    <Checkbox 
        color="primary" 
        name="convert_web_res"
        checked={uploadSettings.convert_web_res === "true" ? true : false}
        onChange={(e) => {
              const state = uploadSettings;
              state.convert_web_res = e.target.checked
              setUploadeSettings(state)
         }}
      /> Convert Web Resolution
</label>

this checks the checkbox but it gets frozen, User loses the ability to toggle the checkbox,