РЕАКТ - Получение AM / PM в Materilalize CSS Timepicker

Question

Я использую материализовать CSS TimePicker в React. В JQuery, который я использовал ранее, я просто получаю значение подключенного поля ввода, которое давало мне строку полного времени при моем нажатии кнопки сохранения.

В React я пытаюсь использовать состояние, но я могу только получить часы и минуты:

import React, {useEffect, useRef, useState} from "react";
import M from "materialize-css";

function AddEvent() {
    const [formData, setFormData] = useState({eventNumber: 0, eventTime: null})
    useEffect(() => {
        var tp = document.querySelectorAll('.timepicker');
        var tpinstances = M.Timepicker.init(tp,
            {
                onSelect: function(hour, minute) {
                    setFormData({...formData,  eventTime : hour + ":" + minute });
                }
            })
    },[]);
    render (
        ....
                <div className="input-field col s12" style={{display: "block"}}>
                    <i className="material-icons prefix red-text red-text-accent-2">event</i>
                    <label htmlFor="eventTime" style={{fontSize: "0.8rem"}}>Event Time</label>
                    <input id="eventTime" name="eventTime" type="text" className="timepicker" style={{marginBottom: "5px"}}/>
                </div>
         ....
....

Я мог бы добавить ссылку (useRef) к тегу ввода, а затем в функции кнопки сохранения формы получить целевое значение, но это кажется немного взломать в React. Я также мог бы использовать 24-часовые часы, но UX сбивает с толку моих клиентов:

Есть ли лучший способ получить значение AM / PM?