Reactjs: Form logic

I'm having problems with the logic form.

So, I have a select form. Like this =>

So what I want is, when the user clicks on the "other" option, an input form will appear.

The question is, how to make the logic function?

My Code =

const ButtonModal = () => {
  const [openModal, setOpenModal] = useState(false);
  const [selectedOption, setSelectedOption] = useState(null);

  const handleModal = () => setOpenModal(!openModal);

  return (
    <>
      <button
        onClick={handleModal}
        className="bg-merah text-white font-bold text-sm rounded-2xl w-48 h-10 py-2 mb-6"
      >
        Perbarui Kompetitor
      </button>
      <Modal
        center
        open={openModal}
        onClose={handleModal}
        showCloseIcon={false}
      >
        <section className="grid justify-items-end">
          <AiOutlineCloseCircle size={30} onClick={handleModal} />
        </section>
        <div className="flex items-center justify-center mb-4">
          <section className="inline-flex gap-2">
            <p className="font-bold text-center">Pembaruan Data Kompetitor</p>
          </section>
        </div>
        <p>
          Tambah data dengan memilih nama kompetitor yang tersedia atau masukkan
          data baru.
        </p>
        <p className="font-bold mt-6">Nama Kompetitor</p>
        <div class="flex justify-center">
          <div class="mb-3 w-600 mr-6 mt-2">
            <select
              onChange={(e) => setSelectedOption(e.target.value)}
              class="form-select appearance-none
      block
      w-full
      px-3
      py-1.5
      mb-1
      text-base
      font-normal
      text-gray-700
      bg-white bg-clip-padding bg-no-repeat
      border border-solid border-gray-300
      rounded
      transition
      ease-in-out
      m-0
      focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
              aria-label="Default select example"
            >
              <option selected>Choose a competitor's name</option>
              <option value="biznet">Biznet</option>
              <option value="cbn">CBN</option>
              <option value="first_media">First Media</option>
              <option value="iconet">Iconet</option>
              <option value="oxygen">Oxygen</option>
              <option value="my_republik">My Republik</option>
              <option value="other">Other</option>
            </select>
          </div>
        </div>

        {selectedOption === "other" && (
          <div class="mb-6">
            <input
              class="w-[37.5rem] bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
              placeholder="Masukan nama kompetitor..."
              required
            />
          </div>
        )}

        <div className="flex items-center justify-center">
          <button
            type="button"
            class="inline-block px-6 py-2 border-2 border-red-600 text-red-600 font-medium text-xs leading-tight rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out"
          >
            Kembali
          </button>
          <button
            type="button"
            class="inline-block ml-6 px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out"
          >
            Ya, Keluar
          </button>
        </div>
      </Modal>
    </>
  );
};