How to make form inputs interdependent in ReactJS - reactjs

Question

I'm practicing to create an app similar to those of peer-2-peer lending, to give a better idea here is a screen.
Lending Application
So, loan size and amount represent the same data: the amount of money you want to get. I would like to know how to connect the input amount with the slider, so that the latter moves according to the amount typed and vice versa.
Also I would like the interest rate to increase by a factor of X as the amount requested increases and vice versa.
Form code:
......
<div className="form-group">
<label htmlFor="size">Loan size</label>
<Typography id="discrete-slider-always" gutterBottom>
Min.
</Typography>
<Slider
defaultValue={550}
min={100}
max={1000}
aria-labelledby="discrete-slider-always"
step={1}
valueLabelDisplay="on"
/>
<TextField
id="standard-read-only-input"
label="Interest rate"
defaultValue="25%"
InputProps={{
readOnly: true,
}}
/>
<FormControl fullWidth variant="outlined">
<InputLabel htmlFor="outlined-adornment-amount">Amount</InputLabel>
<OutlinedInput
id="size"
name="size"
value={tutorial.size}
onChange={handleInputChange}
startAdornment={<InputAdornment position="start">$</InputAdornment>}
labelWidth={60}
/>
</FormControl>
......
I hope I was as clear as possible!

Answer 1

Do something like this:
const X_FACTOR = 0.045;
const [amount, setAmount] = React.useState(550);
const handleAmountChange = (value) => {
setAmount(value);
};
<Slider
defaultValue={550}
min={100}
max={1000}
aria-labelledby="discrete-slider-always"
step={1}
value={amount}
onChange={(e, value) => handleAmountChange(value)}
valueLabelDisplay="on"
/>
<TextField
id="standard-read-only-input"
label="Interest rate"
defaultValue="25%"
value={`${Math.ceil(amount * X_FACTOR)}%`}
InputProps={{
readOnly: true
}}
/>
<FormControl fullWidth variant="outlined">
<InputLabel htmlFor="outlined-adornment-amount">Amount</InputLabel>
<OutlinedInput
id="size"
name="size"
value={amount}
onChange={(e) => handleAmountChange(e.target.value)}
I created a sandbox to show my solution: https://codesandbox.io/s/agitated-torvalds-ed2s7?file=/src/App.tsx