我使用SVG来替换选择html标签上的默认箭头。但是，如果我将SVG放在选择标签栏中，它会阻止点击它下面的选择栏。我是拥有Tailwind和Heroicons的NextJs

<select
          htmlFor="selector"
          name="selected"
          className="w-full p-2.5 border-2 border-gray-500 rounded-md outline-none text-black cursor-pointer appearance-none"
        >
          {/* //leave as the default text// */}
          <option disabled selected value>
            {" "}
            -- Select a cycle --{" "}
          </option>

          {/* //dummy options//fill with data pull// */}
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
        <span className="absolute bottom-9 left-2 px-1 border-l-2 border-r-2 border-white bg-white text-gray-500">
          Cycle
        </span>
        {/* //down arrow// */}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          className="w-5 h-5 absolute right-2 top-3.5 text-gray-500 "
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"
          />
        </svg>

如果你能帮助我，请告诉我向下箭头SVG如何也能打开位于其上的select标签