JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <label for="inst">Instituição</label>
    <input id="inst" type="text" list="_000"></input>
</div>

<div>
    <label for="curso">Curso</label>
    <input id="curso" type="text"></input>
</div>
    
<div>
    <label for="nucleo">Nucleo</label>
    <input id="nucleo" type="text"></input>
</div>
    
<datalist id="_000">
    <option value="Instituicão 100" data-value="100" />
    <option value="Instituicão 200" data-value="200" />
    <option value="Instituicão 300" data-value="300" />
</datalist>

<datalist id="_100">
    <option value="Curso 110" data-value="110" />
    <option value="Curso 120" data-value="120" />
</datalist>

<datalist id="_200">
    <option value="Curso 210" data-value="210" />
    <option value="Curso 220" data-value="220" />
</datalist>

<datalist id="_300">
    <option value="Curso 310" data-value="310" />
    <option value="Curso 320" data-value="320" />
</datalist>

<datalist id="_110">
    <option value="Nucleo 111" data-value="111" />
    <option value="Nucleo 112" data-value="112" />
</datalist>

<datalist id="_120">
    <option value="Nucleo 121" data-value="121" />
    <option value="Nucleo 122" data-value="122" />
</datalist>

<datalist id="_210">
    <option value="Nucleo 211" data-value="211" />
    <option value="Nucleo 212" data-value="212" />
</datalist>

<datalist id="_220">
    <option value="Nucleo 221" data-value="221" />
    <option value="Nucleo 222" data-value="222" />
</datalist>

<datalist id="_310">
    <option value="Nucleo 311" data-value="311" />
    <option value="Nucleo 312" data-value="312" />
</datalist>

<datalist id="_320">
    <option value="Nucleo 321" data-value="321" />
    <option value="Nucleo 322" data-value="322" />
</datalist>

JavaScript

var inst = $("#inst");
var curso = $("#curso");
var nucleo = $("#nucleo");

inst.bind("input", function () {
    curso.val("");
    nucleo.val("");
    nucleo.attr("list", null)
    
    var option = $(inst.prop("list")).find("option[value='" + inst.val() + "']");
    if (option != null && option.length > 0) {
        curso.attr("list", "_" + option.attr("data-value"));
    } else {        
        curso.attr("list", null)
    }
});

curso.bind("input", function () {
    nucleo.val("");
    var option = $(curso.prop("list")).find("option[value='" + curso.val() + "']");
    if (option != null && option.length > 0) {
        nucleo.attr("list", "_" + option.attr("data-value"));
    } else {        
        nucleo.attr("list", null)
    }
});