Place Holder not displaying in select

[NirnayK]

    <FormField
      control={form.control}
      name="category"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="text-bold text-xl">Category</FormLabel>
          <Select onValueChange={field.onChange} defaultValue={field.value}>
            <FormControl>
              <SelectTrigger className="w-1/4 p-2">
                <SelectValue
                  defaultValue=""
                  placeholder="Select Category"
                ></SelectValue>
              </SelectTrigger>
            </FormControl>
            <SelectContent>
              {categories.map((category) => (
                <SelectItem key={category._id} value={category._id}>
                  {category.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </FormItem>
      )}
    />
        
        
        the above  code is  part of a form and the placeholder="Select Category" is never rendered in inside the select 
        
        Though for some reason it always renders for the code below the which is also a part of the form always has the place holder visible:
        
        
        categoryValues.map((property, propertyIndex) => (
          <div className="flex flex-col gap-2" key={propertyIndex}>
            <Label>{property.name}</Label>
            <Select
              required
              onValueChange={(value) => {
                setProperties((prev) => ({
                  ...prev,
                  [property.name]: value,
                }));
              }}
            >
              <FormControl>
                <SelectTrigger>
                  <SelectValue placeholder="Select Value" />
                </SelectTrigger>
              </FormControl>
              <SelectContent>
                {property.values.map((value) => (
                  <SelectItem key={value} value={value}>
                    {value}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        ))}