Im not able to figure out how do I add required attribute to the Menu Component provided by Headless.ui

Question

I have a form in which I have rendered a seperate Dropdown component in which I imported a dropdown from Headless Ui . So When I press the submit button of the form , I want the dropdown component to have some value before submit just like when a select element with required attribute works. But I'm unable to figure out whats the prop which will make the Menu component work like that without me manually writing the logic.

import { Fragment, useState } from 'react'
import { Menu, Transition } from '@headlessui/react'
import { BiChevronDown } from 'react-icons/bi'
import {LuAsterisk} from 'react-icons/lu'

function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

export default function DropDown({label}) {

    const [optionValue, setOptionValue] = useState("Select an option");

    const handleSelect = (e) =>{
        const selectedOption = e.target.value;
        setOptionValue(selectedOption);
      };

  return (
    <Menu as="div" className="w-[49%]  relative inline-block text-left">
         <div className='flex gap-[2px] items-center'>
          <label>{label}</label> <LuAsterisk color='red'/>
          </div>
      <div className='flex h-[40px] mt-1'>
        <Menu.Button className="flex justify-between items-center w-full  gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-[#E0E0E0] hover:bg-gray-50">
          <span className='text-sm font-normal text-[#637381]'>{optionValue}</span>
          <BiChevronDown className="-mr-1 h-5 w-5 text-gray-400" aria-hidden="true" />
        </Menu.Button>
        
      </div>

      <Transition
        as={Fragment}
        enter="transition ease-out duration-100"
        enterFrom="transform opacity-0 scale-95"
        enterTo="transform opacity-100 scale-100"
        leave="transition ease-in duration-75"
        leaveFrom="transform opacity-100 scale-100"
        leaveTo="transform opacity-0 scale-95"
      >
        <Menu.Items className="absolute right-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
          <div className="py-1">
            <Menu.Item>
                
              {({ active }) => (
                <option className={classNames(
                    active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                    'block px-4 py-2 text-sm'
                  )}
                  onClick={handleSelect}>Srinagar</option>
              )}
            </Menu.Item>
            <Menu.Item>
                
              {({ active }) => (
                <option className={classNames(
                    active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                    'block px-4 py-2 text-sm'
                  )}
                  onClick={handleSelect}>Jammu</option>
              )}
            </Menu.Item>
            <Menu.Item>
                
                {({ active }) => (
                  <option className={classNames(
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-4 py-2 text-sm'
                    )}
                    onClick={handleSelect}>Account Settings</option>
                )}
              </Menu.Item>
            <Menu.Item>
                
                {({ active }) => (
                  <option className={classNames(
                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                      'block px-4 py-2 text-sm'
                    )}
                    onClick={handleSelect}>Canada</option>
                )}
              </Menu.Item>
          </div>
        </Menu.Items>
      </Transition>
    </Menu>
  )
}

I tried using a select element with required attribute but that didn't seem to work.