Testing datalist attribute in JS using Testing Library

Question

I am trying to test a datalist attribute in Javascript using the Testing Library. So theres my component. It works fine visually and inside the browser but I am having a hard time trying to test it.

        <input
          class="form-control"
          id="name"
          type="text"
          placeholder="Entrez votre nom"
          v-model="player.name"
          list="playerNames"
          @change="this.isRanked()"
        />
        <datalist id="playerNames" role="listbox">
          <option
            v-for="(playerName, index) in playerOptions"
            :key="playerName + '-' + index"
            :value="playerName"
          ></option>
        </datalist>

test('A list of choices must be offered to the user', async () => {
      const { getByRole } = render(FormComponent)

      await waitFor(()=>{
        expect(getByRole('listbox', { name: 'playerNames' }))
      })
  })

I tried the waitFor as you seen in the snippet. I tried the findByRole. The weird part is that when I check the log in my test it prints

<form
          class="card p-4"
          data-v-90ea45d6=""
        >
          <div
            class="form-group"
            data-v-90ea45d6=""
          >
            <label
              data-v-90ea45d6=""
              for="name"
            >
              Votre nom*:
            </label>
            <input
              class="form-control"
              data-v-90ea45d6=""
              id="name"
              list="playerNames"
              placeholder="Entrez votre nom"
              type="text"
            />
            **<datalist
              data-v-90ea45d6=""
              id="playerNames"
              role="listbox"
            >

              <option
                data-v-90ea45d6=""
                value="C-3PO"
              />
              <option
                data-v-90ea45d6=""
                value="Kath Superwomen"
              />
              <option
                data-v-90ea45d6=""
                value="Luke Skywalker"
              />
              <option
                data-v-90ea45d6=""
                value="Mr Jim Miyagi "
              />
              <option
                data-v-90ea45d6=""
                value="Super Maz 007"
              />

            </datalist>**
          </div>
          <div
            class="form-group my-4"
            data-v-90ea45d6=""
          >
            <label
              data-v-90ea45d6=""
              for="ship"
            >
              Votre vaisseau:
            </label>
            <select
              class="form-select"
              data-v-90ea45d6=""
              id="ship"
              name="ship"
            >

              <option
                data-v-90ea45d6=""
                value="[object Object]"
              >
                Millennium Falcon
              </option>
              <option
                data-v-90ea45d6=""
                value="[object Object]"
              >
                Y-wing
              </option>

            </select>
          </div>
          <button
            class="btn btn-primary btn-disabled"
            data-v-90ea45d6=""
          >
             Débuter la partie
          </button>
        </form>

So the datalist exists but I can't get it at all.