JSFiddle - React, Tailwind, and code Playground

HTML

<!-- code based on https://stackoverflow.com/questions/25093983/jquery-sortable-ui-remove-item-when-is-dragged-to-a-specific-div -->
<div class='tmp'>Sortable List
    <ul class="sortableList">
        <li class="hide" style="display: list-item;">Hide - How to make this sortable when triggering over event on droppable</li>
        <li class="hide" style="display: list-item;">Hide 2 - How to make this sortable when triggering over event on droppable</li>
        <li class="hide" style="display: list-item;">Hide 3 - How to make this sortable when triggering over event on droppable</li>
        
                <li class="item ui-state-highlight">Drag me down</li>
    </ul>
</div>
<div class="test droppableArea">
     <!--IF YOU DRAG THE ITEM fROM THE SORTABLE LIST HERE IT WILL REMOVE IT -->
    <p> 1. DRAG ITEM FROM SORTABLE LIST OVER HERE, DO NOT REALESE MOUSE BUTTON AND TRY TO SORT IT INTO REVEALED LIST ELEMENTS.</p>
    <p>
      2. THEN REALESE BUTTON, AND TRY TO SORT THAT ITEM AGAIN
    </p>
    <p>
      WHAT I WANT TO DO IS CAUSING SORTING LIKE 2. IN 1. BEFORE 1st MOUSE BUTTON RELEASING
    </p>
</div>

CSS

div {
    border:1px solid red;
}
.sortableList {
    height:100px;
    border:1px solid red;
}
.test { background:red;height:200px;}
.hide {display: none !important}
.item {display: list-item !important}

JavaScript

$(document).ready(function () {
    $(".sortableList").sortable({
    });
    
    $('.droppableArea').droppable({
        accept: 'li',
        over: function(event, ui) {
        	$(this).siblings('.tmp').find('.hide').addClass('item');
          $(".sortableList").sortable('refresh')
        }
    });
});