HTML5 Datalist not displaying same information across different browsers

I have created the following datalist for an Angular component:

<input list="products" name="product">
<datalist id="products">
    <option value="10012312310">Water</option>
    <option value="10012312311">Mineral Water</option>
    <option value="10012312312">Filtered Water</option>
    <option value="10012312313">H2O</option>
</datalist>
<input type="submit">

However, it is displayed completely different between the 3 major browsers.

In Chrome it displays the value and the text between the options:

In Firefox it displays the text between the options:

In Edge (Chromium), it only displays the value:

I want it to display both the value and the text. Where Firefox at least displays some useful information is the way Edge (chromium) represents it completely useless.

Is there a way I can make it so the experience is consistent across browser, or all browsers at least display the same information as chrome is displaying it?