How to stop the hiding of dropdown content in specific situation in materialize?

I have made a dropdown with materialize library. It contains list of items. Now I want to have view more link at the bottom of all the items. The link is added successfully but the problem is that when I click that that link dropdown/select gets closed.

const select = document.querySelector("select");

const fillSelect = (newOptions) => {
   const options = select.querySelectorAll("option");
   options.forEach((x) => x.remove());
   newOptions.forEach((opt) => {
      
      const optionElement = document.createElement("option");
      optionElement.innerHTML = opt;
      select.appendChild(optionElement);
   });
   updateSelect();
};

const addViewMoreLink = () => {
  const link = document.createElement('div');
  link.innerHTML = 'View more';
  link.addEventListener('click', e => {
    e.preventDefault();
    e.stopPropagation();
    return false;
  })
  const dropdownContent = select.parentNode.querySelector(".dropdown-content");
  dropdownContent.appendChild(link);
}


const updateSelect = () => {
  window.M.FormSelect.init(select, {});
  
  
}

window.onload = function(){
  fillSelect(["Option 1", "Option 2", "Option 3"]);
  addViewMoreLink()
}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<select id="organization-input">
</select>

I want that when I click the view more it should close the select/dropdown content and show new options. Adding new options is not a problem. The problem currently is that it gets closed even though I have used stop e.stopPropagation();

from How to stop the hiding of dropdown content in specific situation in materialize?