JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="select">
        <li> без inner</li>
        <li class="inner"> тра-ляля
           <p>//Добрый день, подскажите пожалуйста, как мне сделать задержку ховенра на 1 сек,
               // т.е. если курсор наведен в течении 1 сек. то ховер срабатывает,
               // если нет - то не срабатывает?
           </p>
           <p>//Добрый день, подскажите пожалуйста, как мне сделать задержку ховенра на 1 сек,
               // т.е. если курсор наведен в течении 1 сек. то ховер срабатывает
               // если нет - то не срабатывает?
           </p>
        </li>
        <li class="inner"> тра-ляля

            <p>//Добрый день, подскажите пожалуйста, как мне сделать задержку ховенра на 1 сек
                // т.е. если курсор наведен в течении 1 сек. то ховер срабатывает,
                // если нет - то не срабатывает?
            </p>
            <p>//Добрый день, подскажите пожалуйста, как мне сделать задержку ховенра на 1 сек,
                // т.е. если курсор наведен в течении 1 сек. то ховер срабатывает,
                // если нет - то не срабатывает?
            </p>
        </li>
        <li class="inner"> тра-ляля

            <p>//Добрый день, подскажите пожалуйста, как мне сделать задержку ховенра на 1 сек,
                // т.е. если курсор наведен в течении 1 сек. то ховер срабатывает,
                // если нет - то не срабатывает?
            </p>
            <p>//Добрый день, подскажите пожалуйста, как мне сделать задержку ховенра на 1 сек,
                // т.е. если курсор наведен в течении 1 сек. то ховер срабатывает,<br>
                // если нет - то не срабатывает?
            </p>
       </li>
</ul>

CSS

body{
    margin:50px 0 0 50px;
} 
li{
            list-style-type: none;
            height: auto!important;
            height: 50px;
            line-height: 50px;
            border: 1px solid #f67739;
            margin-bottom: 10px;
            padding-left: 20px;
            width:420px;
            cursor: pointer;
        }
        .inner p{
            display: none;
            padding-left: 20px ;
            margin: 0 0 20px;
            line-height: 1.2em;
        }

JavaScript

$(function(){
    var timer;
    $('.inner', '.select').on({
        mouseenter: function(){
            var self = this;
            timer = setTimeout( function(){ $(self).children().slideDown(200)}, 1000);
        },
        mouseleave: function(){
            $(this).children().slideUp(0);
            clearTimeout(timer);
        }
    });
});