React: How to update a variable that depends on a state changes - reactjs

Question

I'm trying to use React to make a Dungeons and Dragons Character Sheet (click here for a preview). One component I am stuck on is the ability modifier, shown below:
With React.useState(), I can automatically changes the number "7" by clicking the arrows
I've cracked the basics of useState(). I can now change the variable titled count in the red circle if I click the MUI arrow buttons. I want the string value (now set to "15") to be dynamic, and equal to (count-10)/2.
I am trying to use onChange to make it work, but no luck. My code for the component is shown below. What am I doing wrong?
`
import React from "react"
import ArrowBackIosIcon from '#mui/icons-material/ArrowBackIos';
import ArrowForwardIosIcon from '#mui/icons-material/ArrowForwardIos';
import Button from '#mui/material/Button';
export default function StatBox(props) {
const[count, setCount] = React.useState(8)
const incrementCount = () => {
setCount(count+1);
}
let modifier = "15"
if (count && !isNaN){
const modifierNum = Math.floor(Number(count)-10/2)
if(modifierNum > 0){
modifier = "+" + modifierNum
}
else{
modifier = modifierNum.toString()
}
}
const decrementCount = () => {
setCount(count-1);
}
return (
<div className="col text-center border border-danger rounded mt-2 mb-2">
<label>{props.stats}</label>
<div className="d-and-d-statbox-modifier">{modifier}</div>
<div className="row justify-content-center mb-2">
<Button
onClick={decrementCount}
onChange={(e) => count.onChange(count, e.target.value)}
size="sm"
variant="contained"
color="error"
>
<ArrowBackIosIcon fontSize="small" />
</Button>
<div>
<span className="mx-1 border-danger text-center dndstatrow">
{count}
</span>
</div>
<Button
onClick={incrementCount}
onChange={(e) => count.onChange(count, e.target.value)}
size="sm"
variant="contained"
color="error"
>
<ArrowForwardIosIcon fontSize="small" />
</Button>
</div>
</div>
);
}
`

Answer 1

Solved!
import React from "react"
import ArrowBackIosIcon from '#mui/icons-material/ArrowBackIos';
import ArrowForwardIosIcon from '#mui/icons-material/ArrowForwardIos';
import Button from '#mui/material/Button';
export default function StatBox(props) {
const[count, setCount] = React.useState(8)
const incrementCount = () => {
setCount(count+1);
}
let modifierNum = Math.floor(((count)-10)/2)
let modifier = ""
if(modifierNum > 0){
modifier = "+" + modifierNum
}
else{
modifier = modifierNum.toString()
}
const decrementCount = () => {
setCount(count-1);
}
return (
<div className="col text-center border border-danger rounded mt-2 mb-2">
<label>{props.stats}</label>
<div className="d-and-d-statbox-modifier">{modifier}</div>
<div className="row justify-content-center mb-2">
<Button
onClick={decrementCount}
size="sm"
variant="contained"
color="error"
>
<ArrowBackIosIcon fontSize="small" />
</Button>
<div>
<span className="mx-1 border-danger text-center dndstatrow">
{count}
</span>
</div>
<Button
onClick={incrementCount}
size="sm"
variant="contained"
color="error"
>
<ArrowForwardIosIcon fontSize="small" />
</Button>
</div>
</div>
);
}