Soy nuevo en reaccionar. Tengo un escenario en el que tengo varios botones de opción y algunos de los botones de opción tienen un cuadro de entrada asociado. Como en la imagen de abajo:


lo que quiero es:

• Si el usuario marcó cualquier botón de opción que tenga un cuadro de entrada asociado, ese cuadro de entrada se convertirá en un campo obligatorio. (muestra el mensaje de validación "se requiere entrada" al hacer clic en el botón; de lo contrario, muestra los datos en la consola).
  

• Si todo está bien, al hacer clic en el botón Guardar, se mostrarán los datos en el
  consola.

He escrito algo de código. Este código se valida si ninguno de los botones de radio está marcado al hacer clic en el botón (caso obvio). Pero no entiendo cómo lograr el requisito anterior.

 import React from "react"; const ContactUsForm = () => { const isFormValid = () => { var radios = document.getElementsByName("myRadio"); var isValid = false; var i = 0; while (!isValid && i < radios.length) { if (radios[i].checked) isValid = true; i++; } return isValid; }; const handleButtonClick = () => { if (!isFormValid()) { alert("Select atleast one radio button"); } else { alert("Success"); } }; return ( <div> {" "} <br /> <label> <input type="radio" name="myRadio" value="Graduate" /> I am graduate </label>{" "} <br /> <label> <input type="radio" name="myRadio" value="Something" /> Some radio button </label>{" "} <br /> <label> <input type="radio" name="myRadio" />I am graduate from university name </label>{" "} <input type="text" id="other" /> <br /> <label> <input type="radio" name="myRadio" /> Other </label> <input type="text" id="other2" /> <br /> <button onClick={handleButtonClick} type="submit"> Save </button>{" "} <br /> </div> ); }; export default ContactUsForm;

¿Alguien puede ayudarme a lograr el requisito anterior en reaccionar? Gracias