React Function loading initial value for Radio Group and selecting it - reactjs

Question

I am having an issue with setting the initial value of a radio group (from a value passed into the function) like this:
export default function SportTeamRanking({team, ...props}) {
So right now I have a Radio Group with 4 radio buttons and the value I want to pre-select or check is contained in the team object specified above (something like team.ranking). This value is passed from a class component into this function. So let's say the team object had a team.ranking value of "rank2" so ideally the Rank 2 radio button would be pre-selected when the function loads.
I have an initial state:
const [value, setValue] = React.useState("");
I've tried setting the React.useState(team.ranking) but still no button is selected.
I also tried using the useEffect and run it only once:
useEffect(() => {
setValue(team.ranking)
}, []);
but with no luck. I tried console logging early on and seems like the team object is still empty while all of this code is already executed?
The goal of this function is to pre-load any saved value that might have been set before (from the team object passed in), then update to a new ranking value if required and save.
For extra info here is the radio group code in the return body:
<FormControl component="fieldset">
<FormLabel component="legend">Team Ranking</FormLabel>
<RadioGroup aria-label="ranking" name="ranking1" value={value} onChange={handleChange}>
<FormControlLabel value="rank1" control={<Radio />} label="Rank 1" />
<FormControlLabel value="rank2" control={<Radio />} label="Rank 2" />
<FormControlLabel value="rank3" control={<Radio />} label="Rank 3" />
<FormControlLabel value="rank4" control={<Radio />} label="Rank 4" />
</RadioGroup>
</FormControl>
And the onChange is simply:
const handleChange = (event) => {
setValue(event.target.value);
};
Any suggestions are appreciated, thanks!

Answer 1

As you have mentioned that the value is passed from a class component to a function component, see if the below code answers your question.
function FormControlLabelPosition(props) {
const onChange = (e) => props.onChange(e.target.value)
return (
<FormControl component="fieldset">
<FormLabel component="legend">Team Ranking</FormLabel>
<RadioGroup aria-label="ranking" name="ranking1" value={props.value} onChange={onChange}>
<FormControlLabel value="rank1" control={<Radio />} label="Rank 1" />
<FormControlLabel value="rank2" control={<Radio />} label="Rank 2" />
<FormControlLabel value="rank3" control={<Radio />} label="Rank 3" />
<FormControlLabel value="rank4" control={<Radio />} label="Rank 4" />
</RadioGroup>
</FormControl>
);
}
export default class Parent extends React.Component {
state = {
value: "rank4"
}
handleChange = (val:string) => this.setState({value: val})
render() {
return (<FormControlLabelPosition value={this.state.value} onChange={this.handleChange}/>)
}
}
Try it out here: https://codesandbox.io/s/material-demo-4ilxb