How to checked radio button on edit in ReactJs using componentDidMount - reactjs

Question

Opening a modal in edit with all the value but radio button is not checked while condition is true. What am I doing wrong here and should this.state.value be checked?
import React, { Component } from 'react';
import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalFooter, MDBInputGroup } from 'mdbreact';
import InputForm from './productsinputfield';
import Collection from './collectionpopup';
import Product from './productpopup';
import axios from 'axios';
This is the class:
class ModalPage extends Component {
addToArr = [{ id: 1, shippingValue: 20, taxValue: 20, shipingStatus: 0, taxStaus: 1 }]
state = {
modal13: false,
tag_name: 'Rajat Srivastava',
status: false,
valueStatus: false,
quantityStatus: false,
}
// This is the function which is calling in every render what
// I want whenever this will be called on edit then radio buttons
// should be checked:
componentDidMount() {
// The Props Data Is Coming From Another Component
if (this.props.sendRowData) {
// This condition is true but still unable to checked radio button:
if(this.props.sendRowData.cart_status == 1){
this.setState({ valueStatus : true });
}else if(this.props.sendRowData.cart_status == 2){
this.setState({quantityStatus : true});
}
}
}
showPopUP(nr) {
let modalNumber = 'modal' + nr
this.setState({
...this.state,
[modalNumber]: !this.state[modalNumber],
status: !this.state.status,
});
this.setState({ name: 'Rajat Srivastava' });
}
This is my JSX code
render() {
return (
<div className="row">
<div className="col-lg-2"></div>
<div className="col-lg-8">
<MDBContainer>
<MDBBtn color="primary" className="floatDiv" onClick={() => this.showPopUP(13)}>
Create Discount Tag
</MDBBtn>
{
this.state.status && <MDBModal isOpen={this.state.modal13} toggle={() => this.showPopUP(13)} size="lg">
<MDBModalBody>
<MDBContainer size="lg">
<form action="#" onSubmit={this.saveTagSettings}>
<h6>Set Products <span style={{ color: "red" }}> * </span></h6><br />
<div className="card card-header">
<div className="form-check card-header">
<div className="marginLeft">
<input className="form-check-input" type="radio" name="product" id="product" checked={this.state.valueStatus} value="1" onChange={(e) => this.handleProductRadio(e, 'minCartVal')} />
<label className="form-check-label" htmlFor="product">
Minimum Cart Value
</label>
</div>
</div>
<div className="form-check card-header">
<div className="marginLeft">
<input className="form-check-input" type="radio" name="product" id="product" checked={this.state.quantityStatus} value="2" onChange={(e) => this.handleProductRadio(e, 'minCartQua')} />
<label className="form-check-label" htmlFor="product">
Minimum Cart Quantity
</label>
</div>
</div>
</div>
<MDBBtn color="primary" type="submit">Save Tag</MDBBtn>
</form>
</MDBContainer>
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={() => this.showPopUP(13)}>
Close
</MDBBtn>
</MDBModalFooter>
</MDBModal>
}
</MDBContainer>
</div>
<div className="col-lg-2"></div>
</div>
);
}
}
export default ModalPage;