Appointment app with React and Firestore - How to make option disabled if exists in database

Im am trying to make an appointment app with ReactJS and Firestore. I am wondering how to check if a timeslot (for that date) is already taken in the database and if it is how to make that option disabled in the select.

This is my appointment component:

import { auth } from '../config/firebase';
import moment from 'moment';
import { setDoc, doc } from 'firebase/firestore';
import { db } from '../config/firebase';
import { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

function Appointment() {
  const [value, onChange] = useState(moment().add(1, 'days')._d);
  const selectedTime = '8';

  const onSelectChange = (e) => {
    selectedTime = e.target.value;
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    const userEmail = auth.currentUser.email;
    const uId = auth.currentUser.uid;
    value.setHours(selectedTime, 0);
    const dateString = moment(value).format('YYYY-MM-DD-HH');

    try {
      await setDoc(
        doc(db, 'appointments', dateString),

        {
          userId: uId,
          userEmail: userEmail,
          appointment_date: dateString,
          appointment_hour: selectedTime,
        }
      );
      alert(`Appointment made on ${moment(value).locale('nl').format('LLLL')}`);
    } catch (error) {
      alert(error);
    }
  };

  const options = {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  };

  return (
    <div className="md:pt-20 pt-24 flex md:flex-row flex-col justify-center items-center md:h-screen">
      <Calendar
        onChange={onChange}
        locale="nl-BE"
        value={value}
        minDate={moment().add(1, 'days')._d}
      />
      <div className="w-60 bg-white m-2 h-60">
        <form
          id="appt-form"
          onSubmit={onSubmit}
          className="flex flex-col items-center content-between place-content-evenly bg-gray-50 h-full"
        >
          <h2 className="text-xl p-2">
            {value.toLocaleDateString('nl', options)}
          </h2>
          <label htmlFor="timepicker">Kies een tijdstip:</label>
          <select
            name="timepicker"
            id="timepicker"
            form="appt-form"
            onChange={onSelectChange}
          >
            <option value="8">08:00</option>
            <option value="9">09:00</option>
            <option value="10">10:00</option>
            <option value="11">11:00</option>
            <option value="13">13:00</option>
            <option value="14">14:00</option>
          </select>

          <button className="p-2 m-4 bg-blue-500 rounded-md text-white">
            Maak een afspraak
          </button>
        </form>
      </div>
    </div>
  );
}

export default Appointment;

Deployed project: https://appointment-app-two.vercel.app/

(You dont have to sign up, just sign in with email test@mail.com and password 123456)