Unchecking Radio buttons is not working with React after useeffect

Below is my Form looks like in return section:

<Form >
<ListGroup >
<ListGroup.Item className="text-start" >
<div>
<Form.Check
type="radio"
id="0"
name="answer"
label={questionsJSON.questions[num].answers[0]}
value={questionsJSON.questions[num].answers[0]}
onChange={e => setSelectedAnswer(e.target.value)}
{...{ selectedAnswer } != null ? "checked" : null}
/>
</div>
</ListGroup.Item>
<ListGroup.Item className="text-start">
<Form.Check
type="radio"
id="1"
name="answer"
label={questionsJSON.questions[num].answers[1]}
value={questionsJSON.questions[num].answers[1]}
onChange={e => setSelectedAnswer(e.target.value)}
/>
</ListGroup.Item>
<ListGroup.Item className="text-start">
<Form.Check
type="radio"
id="2"
name="answer"
label={questionsJSON.questions[num].answers[2]}
value={questionsJSON.questions[num].answers[2]}
onChange={e => setSelectedAnswer(e.target.value)}
{...{ selectedAnswer } != null ? "checked" : null}
/>
</ListGroup.Item>
<ListGroup.Item className="text-start">
<Form.Check
type="radio"
id="3"
name="answer"
label={questionsJSON.questions[num].answers[3]}
value={questionsJSON.questions[num].answers[0]}
onChange={e => setSelectedAnswer(e.target.value)}
{...{ selectedAnswer } != null ? "checked" : null}
/>
</ListGroup.Item>
</ListGroup>
<br />
<Button variant="danger" onClick={onClickPassRadio}>submit</Button>

</Form>

What is happening is first time it works ie all the radio buttons are unchecked once Submit is pressed. But afterwards, useeffect is called and selectedAnswer is being set to null too. But even if I dont click any option, on UI it is shown as checked when it is not as useeffect afterwards shows value as null.

Is there a way to uncheck all the radio buttons once submit is pressed?

    const [selectedAnswer, setSelectedAnswer] = useState("");
const [num, setNum] = useState(0);
const randomNumberInRange = ( max) => {
return Math.floor(Math.random() 
* (max  + 1));
};
const onClickPassRadio = (e) => {
e.preventDefault();
//console.log(selectedAnswer);
setNum(randomNumberInRange(10));
};
useEffect(() => {
setSelectedAnswer(null);
}, [setNum]);

<Form>
<ListGroup>
<ListGroup.Item className="text-start">
<div>
<Form.Check
type="radio"
id="0"
name="answer"
label={questionsJSON.questions[num].answers[0]}
value={questionsJSON.questions[num].answers[0]}
onChange={(e) => setSelectedAnswer(e.target.value)}
checked={selectedAnswer === questionsJSON.questions[num].answers[0]}
/>
</div>
</ListGroup.Item>
<ListGroup.Item className="text-start">
<Form.Check
type="radio"
id="1"
name="answer"
label={questionsJSON.questions[num].answers[1]}
value={questionsJSON.questions[num].answers[1]}
onChange={(e) => setSelectedAnswer(e.target.value)}
checked={selectedAnswer === questionsJSON.questions[num].answers[1]}
/>
</ListGroup.Item>
<ListGroup.Item className="text-start">
<Form.Check
type="radio"
id="2"
name="answer"
label={questionsJSON.questions[num].answers[2]}
value={questionsJSON.questions[num].answers[2]}
onChange={(e) => setSelectedAnswer(e.target.value)}
checked={selectedAnswer === questionsJSON.questions[num].answers[2]}
/>
</ListGroup.Item>
<ListGroup.Item className="text-start">
<Form.Check
type="radio"
id="3"
name="answer"
label={questionsJSON.questions[num].answers[3]}
value={questionsJSON.questions[num].answers[0]}
onChange={(e) => setSelectedAnswer(e.target.value)}
checked={selectedAnswer === questionsJSON.questions[num].answers[3]}
/>
</ListGroup.Item>
</ListGroup>
<br />
<Button variant="danger" onClick={onClickPassRadio}>
submit
</Button>
</Form>

To uncheck all the radio buttons once the submit button is pressed, you need to update the selectedAnswer state to an empty string ("") instead of null. Here's the modified code that should achieve the desired behavior:

useEffect(() => {
setSelectedAnswer(""); // Update to an empty string instead of null
}, [num]);

Hope this one help you.

const onClickPassRadio = (e) => {
e.preventDefault();
setSelectedAnswer(""); // reset selectedAnswer to uncheck all radio buttons
setNum(randomNumberInRange(10));
};