React Multi-Step Form: How to handle radio button with 'other' input text field

Question

I'm creating a React application that makes use of a multi-step form. There are 4 'steps' altogether and each form data is stored inside of a state variable.

I'm having a problem particularly with the radio button options. When I click the 'other' option, the input text field allows me to write text inside of it and then when I decide to move on to the next step of the form and then return back to the first section, the text inside remains but the 'other' option is not selected. When I click the 'other' option again, the text inside the input field is removed. What I want is to be able to select the 'other' option and then write my desired text and then when I move to the next steps of the form and then return back to the first step, the 'other' radio button should already be selected and the text inside the field to remain.

Here is the part of the code I'm referring to:

<div className="flex items-center gap-x-3 mb-2">
   <Field type="radio" name="tuition" value="" onClick={(e) => setIsClicked(true)} checked={isClicked} />
    <label htmlFor="other" className="block text-sm font-medium leading-6 text-gray-900">
       Other
    </label>
</div>
<div className="flex items-center gap-x-3">
    <input
      id="tuition"
      name="tuition"
      type="text"
      value={values.tuition}
      disabled={!isClicked}
      onChange={handleChange}
      className="mb-3 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
     />
</div>

Any help in solving this problem would be greatly appreciated.

Thanks!