[FIXED] How look this function on React?

Issue

How make refactoring this cod in React:

$('#'+$(e.target).attr('for')).prop('checked',true);
});
$(document).click(function() {
  $('.dropdown-el').removeClass('expanded');
});

I don't know how refactoring the cod. So that "defaultChecked={true}" was changed to "defaultChecked={false}" when I click on one of the label????

It's my last cod:

const { register, handleSubmit } = useForm<IFormInput>();
  const [isOpened, setIsOpened] = useState(false);
  const dropdownRef = useRef(null);
  const onSubmit = (data: IFormInput) => {
    console.log(data);
  };
  const handleOnClick = (event: any) => {
    console.log("test");
    setIsOpened(!isOpened);
    event.stopPropagation();
    event.preventDefault();
  };
return ( <span
        ref={dropdownRef}
        onClick={handleOnClick}
        className={isOpened ? "expanded dropdown-el" : "dropdown-el"}
      >
        <form onSubmit={handleSubmit(onSubmit)}>
          <input  className={styles.input} 
            {...register("sortType")}
            type="radio"
            value="Freelancer"
            id="sort-relevance"
            defaultChecked={false}
          />
          <label className={styles.label} htmlFor="sort-relevance">Freelancer</label>
          <input className={styles.input} 
            {...register("sortType")}
            type="radio"
            value="Client"
            id="sort-best"
            defaultChecked={true}
          />
          <label className={styles.label} htmlFor="sort-best">Client</label>
        </form>
        </span>)

Solution

export default function App() {
  const { register, handleSubmit } = useForm<IFormInput>();
  const [isOpened, setIsOpened] = useState(false);
  const dropdownRef = useRef(null);
  const [checked, setChecked] = useState("Client"); // Set first initial value for select

  const handleClick = (e) => {
    setChecked(e.target.value);
    e.target.defaultChecked = true;
  };
  const onSubmit = (data: IFormInput) => {
    console.log(data);
  };

  const handleOnClick = (event: any) => {
    console.log("test");
    setIsOpened(!isOpened);
    event.stopPropagation();
    event.preventDefault();
  };

  return (
    <div>
      <span
        ref={dropdownRef}
        onClick={handleOnClick}
        className={isOpened ? "expanded dropdown-el" : "dropdown-el"}
      >
        <form onSubmit={handleSubmit(onSubmit)}>
          <input
            type="radio"
            name="radio"
            id="sort-relevance"
            checked={checked === "Freelancer"}
            onClick={(e) => handleClick(e)}
          />
          <label
            htmlFor="sort-relevance"
            onClick={() => setChecked("Freelancer")}
          >
            Freelancer
          </label>
          <input
            type="radio"
            name="radio"
            id="sort-best"
            checked={checked === "Client"}
            onClick={(e) => handleClick(e)}
          />
          <label htmlFor="sort-best" onClick={() => setChecked("Client")}>
            Client
          </label>
        </form>
      </span>
    </div>
  );
}

Answered By - Arthur Zuev
Answer Checked By - - Dawn Plyler (ReactFix Volunteer)