JSFiddle - React, Tailwind, and code Playground

HTML

<input list="list">
<datalist id="list">
    <option value="a">a</option>
    <option value="b">b</option>
</datalist>

JavaScript

function handleFocus() {
	setTimeout(() => {
	    document.querySelector('datalist').innerHTML = '<option value="c">c</option><option value="d">d</option>'
    }, 500) 
}

document.querySelector('input').addEventListener('focus', handleFocus);