React - SUM state values - reactjs

Question

EDIT: I forgot to say that the onChange on the inputs doesn't work, how do I tell to onChange it's the state value inside the group?
I started to learn React few weeks ago. I want to SUM the group state values and every time it changes the total value changes too. I'm using material ui to create the form. The problem is if I change the state value to int the FormControlLabel value won't work... as a string the total doesn't work as expectable. And how I can handle the total change everytime I change the option?
Thanks in advance.
class App extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
total: 0,
group: {
feedingGroup: "3",
bathingA: "3",
bathingB: "3",
}
}
}
componentDidMount() {
this.setState({ total: this.calculateTotal(this.state.group) });
}
calculateTotal = (values) => {
return Object.entries(values).reduce((finalValue, [key, value]) => {
return finalValue + value;
}, 0);
}
handleSubmit(event) {
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<FormControl component="fieldset" error="" className="">
<RadioGroup aria-label="quiz" name="quiz" value={this.state.group.feedingGroup}
onChange={(value) => { this.setState({ feedingGroup: (value.target.value) }); }}>
<FormControlLabel value="0" control={<Radio />} label="Op1" />
<FormControlLabel value="1" control={<Radio />} label="Op2" />
<FormControlLabel value="2" control={<Radio />} label="Op3" />
<FormControlLabel value="3" control={<Radio />} label="Op4" />
</RadioGroup>
<RadioGroup aria-label="quiz" name="quiz" value={this.state.group.bathingA}
onChange={(value) => { this.setState({ bathingA: (value.target.value) }); }}>
<FormControlLabel value="0" control={<Radio />} label="Op1" />
<FormControlLabel value="1" control={<Radio />} label="Op2" />
<FormControlLabel value="2" control={<Radio />} label="Op3" />
<FormControlLabel value="3" control={<Radio />} label="Op4" />
</RadioGroup>
<Button type="submit" variant="outlined" color="primary" className="">
Check Answer
</Button>
<FormHelperText>{this.state.total}</FormHelperText>
</FormControl>
</form>
);
}
}
export default App;

Answer 1

How about casting the value:
calculateTotal = (values) => {
return Object.entries(values).reduce((finalValue, [key, value]) => {
return finalValue + Number(value);
}, 0);
}