Select component doesn't work

[TungusSs]

Hello, I am making a CRUD for my project. I have 2 tables, in the first one product categories, in the second one product itself. When I create a record in the table with products I need to specify the category. However, when I click on Select, the component just does not do anything, not even an error! However, when I used ChatGPT to rewrite it all as normal html+tailwindccs, it worked. Any idea why?

Using Select:

<Select
  label="Категория"
  value={formData.products_category}
  onChange={(value) =>
    setFormData((prev) => ({
      ...prev,
      products_category: value.toString(),
    }))
  }
  variant="bordered"
  size="lg"
  required
>
  {categories.map((category) => (
    <SelectItem key={category.id} value={category.id}>
      {category.category_name}
    </SelectItem>
  ))}
</Select>

Using basic html + tailwindcss:

<div className="w-full">
  <label className="block text-sm font-medium mb-2">Категория</label>
  <select
    className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
    value={formData.products_category}
    onChange={(e) =>
      setFormData((prev) => ({
        ...prev,
        products_category: e.target.value,
      }))
    }
    required
  >
    <option value="" disabled>
      Выберите категорию
    </option>
    {categories.map((category) => (
      <option key={category.id} value={category.id}>
        {category.category_name}
      </option>
    ))}
  </select>
</div>

[wingkwong]

which version are you using?

[TungusSs]

"@heroui/react": "2.6.14",
"next": "14.2.14"

[wingkwong]

We don't use value prop. You may refer to https://www.heroui.com/docs/components/select#usage to see the usage.