JSFiddle - React, Tailwind, and code Playground

HTML

<select class="form-control" id="FirstDDL" name="FirstDDL">
    <option>Select Option 1</option>
    <option value="1">Option1</option>
    <option value="2">Option2</option>
    <option value="3">Option3</option>
</select>
<select class="form-control" id="SecondDDL" name="SecondDDL">
    <option value="">Select Option 2</option>
    <optgroup label="Option1" data-optgroupval="1">
        <option value="12">SubOption1Value1</option>
        <option value="13">SubOption1Value2</option>
        <option value="14">SubOption1Value3</option>
    </optgroup>
    <optgroup label="Option2" data-optgroupval="2">
        <option value="49">SubOption2Value1</option>
        <option value="50">SubOption2Value2</option>
        <option value="51">SubOption2Value3</option>
    </optgroup>
    <optgroup label="Option3" data-optgroupval="3">
        <option value="33">SubOption3Value1</option>
        <option value="34">SubOption3Value2</option>
        <option value="35">SubOption3Value3</option>
    </optgroup>
</select>

JavaScript

$(document).ready(function () {
    
        $("#FirstDDL").change(function () {
            var thisValue = $(this).val();
    
            var $optGroups = $("#SecondDDL optgroup");
            $optGroups.hide();
    
            $optGroups.filter("[data-optgroupval="+thisValue+"]").show();
    
        });
    });