Reactjs: Form logic - reactjs

Question

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>
</>
);
};