I want to reset the value of the Select but it is not working, i keep getting the SelectItem instead of the placeholder.

'use client'

import { useState } from 'react'
import { capitalizeFirstLetter } from '@/lib/text'

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select'

type Props = {
  tagList: string[]
  searchTag: string
  setSearchTag: (val: string) => void
}

export default function FilterOption({ tagList, searchTag, setSearchTag }: Props) {
  const [isOpen, setIsOpen] = useState<boolean | undefined>()

  const handleLabelClick = () => {
    setSearchTag('')
    setIsOpen(false)
  }

  const handleSelectChange = (val: string) => {
    setSearchTag(val)
    setIsOpen(false)
  }

  return (
    <div>
      <Select
        onValueChange={handleSelectChange}
        onOpenChange={(val) => setIsOpen(val)}
        open={isOpen}
      >
        <SelectTrigger className="w-[270px]">
          <SelectValue placeholder="Select a tag" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            {searchTag ? (
              <SelectLabel onClick={handleLabelClick} className="cursor-pointer">
                remove filter
              </SelectLabel>
            ) : (
              <SelectLabel>Tags</SelectLabel>
            )}

            {tagList.map((tag) => {
              return (
                <SelectItem key={tag} value={tag} className="cursor-pointer">
                  {capitalizeFirstLetter(tag)}
                </SelectItem>
              )
            })}
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  )
}