React - On change of radiobutton component, update textbox component state - reactjs

Question

I have 3 components. Main Component named 'XYZ' which contains 2 other components named 'RadioButton' and 'Textbox'. I need to update state of Textbox component (Setting value to 500) on change of RadioButton component. Below is my code. I am new to React development. Any help would be surely appreciated!
Main Component - XYZ.tsx
const XYZ = (props) => {
let lossCapacityValues = [
{ value: "Average", text: "Average" },
{ value: "Medium", text: "Medium" }
];
const lossCapacityChange = (event) => {
let ele = $(event.target);
};
return (
<div className="mel-box">
<RadioButton groupName="radio-loss-type" selectedValue="2" items={lossCapacityValues} onChange={lossCapacityChange} />
<TextBox value="1000" />
</div>
)
};
export default XYZ;
Child Component - 1- RadioButton.tsx
const RadioButton = (props) => {
const onChange = (event) => {
props.onChange && props.onChange(event);
}
return (
<div>
{
props.items.map((i: { "text": string, "value": string }, index: number) => {
return (
<div key={index} className="radiobutton-option-div">
<input
className="radio-custom"
type="radio"
name={props.groupName}
value={i.value}
defaultChecked={i.value === props.selectedValue}
onChange={onChange}
/>
<label className="radio-custom-label">
<span className="radio-custom-text">{i.text}</span>
</label>
</div>
)
})
}
</div>
);
};
export default RadioButton;
Child Component - 2- TextBox.tsx
const TextBox = (props) => {
const [state, setState] = React.useState({
value: props.value
});
const handleChange = (evt) => {
setState({ value: evt.target.value });
};
return (
<React.Fragment>
<div className="input-text">
<input
type="text"
value={state.value}
onChange={handleChange}
/>
</div>
</React.Fragment>
)
};
export default TextBox;

Answer 1

This can be done by lifting the state up, out of the TextBox component into the XZY component.
Working demo
In XYZ, put the text state handlers:
const XYZ = (props) => {
const [textState, setTextState] = React.useState({
value: 1000
});
const handleTextChange = (evt) => {
setTextState({ value: evt.target.value });
};
....
....
};
Pass them as props:
<TextBox value={textState.value} onChange={handleTextChange} />
Change your input to use them:
<input
type="text"
value={props.value}
onChange={props.onChange}
/>
In your XYZ you can check the selected radio value and set the text state accordingly.
const lossCapacityChange = (event) => {
//let ele = $(event.target);
if(event.target.value == 'Average'){
setTextState({ value: 500 });
}
};
Side note: you should avoid the use of jQuery in React unless there is a good reason for it. React uses a Virtual DOM which can be affected by jQuery use.