JSFiddle - React, Tailwind, and code Playground

HTML

<input list="answers" name="answer" id="answerInput">
<datalist id="answers">
  <option value="42">The answer</option>
  <option value="43">The answer</option>
  <option value="44">Another Answer</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">

JavaScript

document.querySelector('#answerInput').addEventListener('input', function(e) {
    var input = e.target,	
        list = input.getAttribute('list'),
        options = document.querySelectorAll('#' + list + ' option[value="'+input.value+'"]'),
        hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden');

    if (options.length > 0) {
	    hiddenInput.value = input.value;
      input.value = options[0].innerText;
      }
   
});