In react deselect the radio button after all the input fields have been processed

Question

I am creating a form in react, where the user enters into the input text fields: name, role and selects the gender by the radio button. On clicking the submit button the user stores the entered data into a state. The values are displayed below the form. What I want is, every time the submit button is pressed, the new values added gets displayed, as well as all of the fields get empty as well. I know how to reset the input text fields but am not able to reset the radio buttons. Any Idea how can I reset the radio buttons as well. The code is :

const [user, setUser] = useState({});    // state is created

the form body is :

<div className="entryForm">
            <span>
                <label htmlFor="name">Name</label>
                <input
                    type="text"
                    id="name"
                    value={user?.name}
                    onChange={(e) =>
                        setUser((prev) => ({
                            ...prev,
                            name: e.target.value,
                        }))
                    }
                ></input>
            </span>
            <span>
                <label htmlFor="role">Role</label>
                <input
                    type="text"
                    id="role"
                    value={user?.role}
                    onChange={(e) =>
                        setUser((prev) => ({
                            ...prev,
                            role: e.target.value,
                        }))
                    }
                ></input>
            </span>
            <h3>Gender</h3>
            <div className="radio">
                <span>
                    <input
                        type="radio"
                        id="male"
                        value="male"
                        name="gender"
                        onChange={(e) =>
                            setUser((prev) => ({
                                ...prev,
                                gender: e.target.value,
                            }))
                        }
                    ></input>
                    <label htmlFor="male">Male</label>
                </span>
                <span>
                    <input
                        type="radio"
                        id="female"
                        value="female"
                        name="gender"
                        onChange={(e) =>
                            setUser((prev) => ({
                                ...prev,
                                gender: e.target.value,
                            }))
                        }
                    ></input>
                    <label htmlFor="female">Female</label>
                </span>
            </div>
            <button
                onClick={() => {
                    dispatch(addUser(user));   // to send data to other component
                    setUser({
                        name: "",
                        role: "",
                        gender: "",
                    });
                }}
            >
                Submit
            </button>
        </div>

Answer 1

Input type="radio" has attribute name checked, you can toggle it with true/false value. From what I understand from your code, your input should look something like this

<input 
  type="radio" 
  name="gender" 
  value="female" 
  checked={(user?.gender == 'female')} //which will be true if female was choosen
/>

and then when you complete sending the data you can set user.gender = false