Select component is not working with react-hook-form

Here’s the snippet:

<Select
        className="max-w-xs"
        aria-label="Thought tag"
        {...register("tag")}
      >
        <Select.Option value={"default"} disabled>
          Select Tag
        </Select.Option>
        <Select.Option value={"Life"}>Life</Select.Option>
        <Select.Option value={"Tech"}>Tech</Select.Option>
        <Select.Option value={"Random"}>Random</Select.Option>
        <Select.Option value={"Rant"}>Rant</Select.Option>
        <Select.Option value={"Truth"}>Truth</Select.Option>
</Select>

and when I select something from the dropdown, it shows this:

I tried the native select and it works

<select className="select w-full max-w-xs" {...register("tag")}>
        <option disabled defaultChecked>
          Select Tag
        </option>
        <option value={"Life"}>Life</option>
        <option value={"Tech"}>Tech</option>
        <option value={"Random"}>Random</option>
        <option value={"Rant"}>Rant</option>
        <option value={"Truth"}>Truth</option>
</select>

Please let me know if this problem is specific to me or it is not really working, thank you.