Why theWhy event.stopPropagation(); is not working

Hi

below is my entire code, the issue that i am facing is when a user clicks on any character name or heart icon inside the suggestionsList, the suggestion list gets closed automatically. It should not happen like this,
what should actually happen is WHEN THE SUGGESTION LIST OPENS AND ALL THE LIST ITEMS ARE VISIBLE, IT SHOULD REMAIN OPEN AND inside the list if the user clicks on character name it should open another page and if the user clicks on the heart icon against a particular character, it should get added to favorite list by calling “clickFav” function and throughout the process the suggestionlist box should remain open. Only if the user clicks outside it, it should get closed.

html code

<div class="search-container">
    <input class="input" type="text" id="searchInput" placeholder="Type to search">
    <ul class="suggestions" id="suggestionsList"></ul>
</div>

js code


let displayList = document.querySelector('.display-list');
let searchInput = document.querySelector('#searchInput');
let suggestionsList = document.querySelector('#suggestionsList');
let heroList = [];
let favList = [];

document.addEventListener('DOMContentLoaded', function () {
    // Load favList from local storage or initialize an empty array
    favList = JSON.parse(localStorage.getItem('favList')) || [];

    fetch('http://gateway.marvel.com/v1/public/characters?ts=1&apikey=70e56b7dd94e89b259cbb7e0625a92ee&hash=8b18d739e6f0be231a4967977ee49053')
        .then((response) => {
            return response.json();
        })
        .then((result) => {
            heroList = result.data.results;
            heroList.forEach((ele) => {
                let path = ele.thumbnail.path;
                let ext = ele.thumbnail.extension;
                let img = `${path}/portrait_xlarge.${ext}`;
                let heroName = ele.name;

                let divEle = `<div class="card">
                    <div class="img">
                        <img src="${img}" alt="">
                    </div>
                    <div class="fav" data-index=${ele.id}>
                        <div class="name">${heroName} </div>
                        <i class="fa-heart 
                        ${
                            favList ? 
                            favList.includes(ele.id) ? 'fa-solid' : 'fa-regular' 
                            : 'fa-regular'                 
                        }
                        " ></i>
                    </div>
                </div>`;
                displayList.insertAdjacentHTML('beforeEnd', divEle);
            });
        });

    searchInput.addEventListener('input', () => {
        let userInput = searchInput.value.toLowerCase();
        let filterSuggestion = heroList.filter((char) => char.name.toLowerCase().startsWith(userInput));
        displaySuggestionList(filterSuggestion);
    });
    
    function displaySuggestionList(suggestion) {
        suggestionsList.innerHTML = '';
        if (suggestion.length > 0) {
            suggestion.forEach((char) => {
                let searchDiv = `
                    <li data-index=${char.id} >
                        <a href="#"> ${char.name} </a>
                        <i class="fa-heart 
                            ${
                                favList ? 
                                favList.includes(char.id) ? 'fa-solid' : 'fa-regular' 
                                : 'fa-regular'
                            }
                        "></i>
                    </li>`;
                suggestionsList.insertAdjacentHTML('beforeEnd', searchDiv);
            });
    
           
            // Add event listeners to <li> elements
            suggestionsList.querySelectorAll('li').forEach((li) => {
                li.addEventListener('click', (event) => {
                    // Call the clickFav function with the corresponding data-index
                    clickFav(li.getAttribute('data-index'));
                    event.stopPropagation();
                });
            });
    
           
    
        } else {
            suggestionsList.innerHTML = '<li>No suggestions found</li>';
        }
    }
    

    displayList.addEventListener('click', clickFav);

    function clickFav(event) {
        if (event.target.classList.contains('fa-heart')) {
            const id = event.target.parentElement.dataset.index;
            createFavAndLocal(id,event);
        }
    }

    function createFavAndLocal(id, event) {
        // Check if id is already in favList
        let intId = parseInt(id, 10)
        let index = favList.indexOf(intId);
       
        if (index === -1) {
            // If not present, add it
            let val = parseInt(id, 10)
            favList.push(val);
            console.log("Added to favorites");
            event.target.classList.replace('fa-regular', 'fa-solid');
        } else {
            // If already present, remove it
            favList.splice(index, 1);
            console.log("Removed from favorites");
            event.target.classList.replace('fa-solid', 'fa-regular');
        }

        console.log(favList);
        localStorage.setItem('favList', JSON.stringify(favList));
    }
});

event.stopPropagation(); is not working, i don’t know why ??? can anyone please help