Render Rails Turbo Frame and remove the tab

I have a complex multi-level dropdown menu and I want to load the content only when user click on the button. The content is lazy loaded.

<div class="dropleft">
  <button type="button" class="btn btn-clean btn-icon btn-sm btn-icon-md" data-toggle="dropdown">
     Open multi-level dropdown
  </button>
        
  <div class="dropdown-menu">    
      <%=turbo_frame_tag "actions", src: controller_path(), loading: 'lazy' do %>
         Loading...
      <% end %>
  </div>   
</div>

controller

def actions
    render layout: false
end

actions.html.erb

<%=turbo_frame_tag "actions" do %>
 <li>item 1</li>
 <li>item 1</li>
<% end %

now the problem is that the rendered tag mess up with the existing code and broke the boostrap dropdown.

<div class="dropleft show">
   <button type="button" class="btn btn-clean btn-icon btn-sm btn-icon-md" data-toggle="dropdown">
      Open multi-level dropdown
   </button>
        
   <ul class="dropdown-menu show" style="position: absolute; transform: translate3d(-158px, 0px, 0px); top: 0px; left: 0px; will-change: transform;" x-placement="left-start">    
     <turbo-frame loading="lazy" id="actions" src="http://localhost:3000/actions">
         <li>Item 1</li>
        <li>Item 2</li>
      </turbo-frame> <!-- This tag broke the multi-level dropdown -->
    </ul>   
 </div>

How can I say to render the template from server and then remove the turbo frame tag?