JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.css">
<div class="ui selection dropdown">
    <input type="hidden" name="test" value="" />
    <div class="text">Test</div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item" data-value="">Not Selected</div>
        <div class="item" data-value="A">A</div>
        <div class="item" data-value="B">B</div>
    </div>
</div>

CSS

body {
    padding: 1em;
}

JavaScript

// Add javascript here
$(".ui.dropdown").dropdown("set selected", "A");

alert("Going to set new content in the dropdown and will try to set a new selected value");

setTimeout(function() {
    $(".ui.dropdown").find(".menu").html(
        '<div class="item" data-value="">Not Selected</div>'+
        '<div class="item" data-value="C">C</div>'+
        '<div class="item" data-value="D">D</div>'
    );
    
    $(".ui.dropdown").dropdown("set selected", "C");
    
    alert("Internal content changed by 'set selected' did not recognize it");
}, 1000);