ReactJS useRef for datepicket and input select

[freesudani]

Im trying to collect input from a form using the useRef hook , for the text input field thats straight forward and its not an issue but what about fields where you have a selector or a date picker how i will use UseRef in this situation below is my code for the form

 const [enteredName, setEnteredName] = useState("");
  const [enteredEmail, setEnteredEmail] = useState("");
  const DateInputRef = useRef();
  const TimeInputRef = useRef();
  const NumOfTicktInputRef = useRef();

  const nameInputChangeHandler = (event) => {
    setEnteredName(event.target.value);
  };

  const emailInputChangeHandler = (event) => {
    setEnteredEmail(event.target.value);
  };

  const formSubmissionHandler = (event) => {
    event.preventDefault();

    const Time = TimeInputRef.current;
    const Date = DateInputRef.current;
    const Ticket = NumOfTicktInputRef.current;

    console.log(enteredName, enteredEmail, Time, Date, Ticket);
  };
  return (
    <SimpleForm
      variants={FormVariant}
      animate={props.onAnimation}
      onSubmit={formSubmissionHandler}
    >
      <FormControl>
        <label htmlFor="name">You Name</label>
        <input type="text" id="name" onChange={nameInputChangeHandler} />
      </FormControl>
      <FormControl>
        <label htmlFor="email">You E-mail</label>
        <input type="text" id="email" onChange={emailInputChangeHandler} />
      </FormControl>

      <FormControl style={{ display: "inline-block", width: "10rem" }}>
        <label for="time">Choose Opening Time</label>
        <select id="time" ref={TimeInputRef}>
          <option value="morning">08:00 - 10:00</option>
          <option value="afternoon">11:00 - 13:00</option>
          <option value="evening">15:00 - 17:00</option>
        </select>
      </FormControl>
      <FormControl style={{ display: "inline-block", width: "10rem" }}>
        <label for="pickadate">Pick A Day:</label>
        <input
          type="date"
          id="pickadate"
          name="Pick a Day"
          ref={DateInputRef}
        ></input>
      </FormControl>

      <FormControl style={{ display: "inline-block", width: "7rem" }}>
        <label for="tickets">Number of Tickets</label>
        <input
          type="number"
          id="tickets"
          name="points"
          step="1"
          min="1"
          ref={NumOfTicktInputRef}
        ></input>
      </FormControl>
      <FormAction>
        <button>Submit</button>
      </FormAction>

[DanCouper]

theRefForTheSelect.options[select.selectedIndex].value;

See, for example (this was the first result for on Google) JavaScript: How to Get the Value of a Select or Dropdown List

Two things though:

• when you submit a form it gives you all the information from the form, the submit event (onSubmit here) gives you everything that’s currently in the form at the point of submission, you don’t need to manually grab every single field. This is built into HTML and the JS APIs that let you handle HTML. You’re using uncontrolled components, so given that it makes little sense to manually check them.
• if you are handling them manually, why are you using refs (which add quite a lot of complication and are an escape hatch from react more than anything else) instead of using controlled components (where you get and set the values of the inputs via the state), which is the recommended way of dealing with forms in React?