Select initally flashes empty on page load in client component

[TheAxleGroup]

With my select, it initally flashes empty on page refresh. This occurs without any data streaming from the server, and occurs in a client component.
This is the select below, with a gif of the interaction:

<Select value="apple">
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="blueberry">Blueberry</SelectItem>
      <SelectItem value="grapes">Grapes</SelectItem>
      <SelectItem value="pineapple">Pineapple</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Is it something I'm doing, should it have some suspense?

[jcalzolari]

Same problem here, this is my code:

       <Select
          value={employmentStatus || undefined}
          onValueChange={onEmploymentStatusChange}
        >
          <SelectTrigger
            className={fieldErrors.employment_status ? "border-destructive" : ""}
          >
            <SelectValue placeholder="Select an option" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="employed">Employed</SelectItem>
            <SelectItem value="freelance">Freelance</SelectItem>
            <SelectItem value="job_searching">Job searching</SelectItem>
            <SelectItem value="student">Student</SelectItem>
          </SelectContent>
        </Select>