Tailwind/Flowbite modal hidden behind backdrop

Question

I'm going through the same issue as this developing in django: even with aria-hidden set to true it doesn't work.

I'm also really confused because i'm using the same exact modal for the signup and it works perfectly with two cta buttons, the structure is the same, basically copied changing only the ids. Inspecting on the browser the backdrop that appears after i click on it is the same for both modals, i don't understand why the backdrop with z-40 is making it impossible to interact with the login that has z-50.

<div id="login_modal" data-modal-backdrop="static" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative w-full max-w-md max-h-full">
      <!-- Modal content -->
      <div class="relative bg-darkred rounded-lg shadow">
          <button id="close-login_modal" type="button" class="absolute top-3 right-2.5 text-palettewhite hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="login_modal">
              <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
              </svg>
              <span class="sr-only">Close modal</span>
          </button>
          <div class="px-6 py-6 lg:px-8">
              <h3 class="mb-4 text-xl font-medium text-palettewhite">Login to our platform</h3>
              <form class="space-y-6" action="{% url 'home' %}" method="POST">
                {% csrf_token %}
                    <div>
                        <label for="username" class="block mb-2 text-sm font-medium text-palettewhite">Email address</label>
                        <div class="mt-1">
                            <input id="username" name="username" type="text" required class="bg-palettewhite border border-paletteblue text-paletteblack text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="">
                        </div>
                        <small class="text-palettewhite">{{ form.username.help_text }}</small>
                    </div>
                    <div>
                        <label for="password" class="block mb-2 text-sm font-medium text-palettewhite">Password</label>
                        <div class="mt-1">
                            <input id="password1" name="password1" type="password" required class="bg-palettewhite border border-paletteblue text-paletteblack text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="********">
                        </div>
                        <small class="text-palettewhite">{{ form.password.help_text }}</small>
                    </div>

                <button type="submit" name="login_form-submit" class="w-full text-palettewhite bg-patternred font-medium rounded-lg text-sm px-5 py-2.5">Create your account</button>
              </form>
          </div>
      </div>
    </div>
</div> 

And this is the script for it along with the flowbite script:

const openLoginModalButton = document.getElementById('open-login_modal');
        const closeLoginModalButton = document.getElementById('close-login_modal');
        const loginModal = document.getElementById('login_modal');
    
        openLoginModalButton.addEventListener('click', () => {
            loginModal.classList.remove('hidden');
        });
    
        closeLoginModalButton.addEventListener('click', () => {
            loginModal.classList.add('hidden');
        });

I read flowbite django docs, double checked my configs and everything is as it should, it's so frustrating..

Thank you in advance to anyone that replies

Edit: This is the button, part of a ul in the navbar in my base.html, the button for the signup modal beside it works perfectly fine. I don't include the signup modal under that button because i already do it under a same button in the hero section of my homepage.html, but i just noticed that if i change this order (so include in the base and not in the homepage, or even in both), the signup stops working. Could it be then an error with including these in my base.html? If so, I still dont know how to proceed as I want my navbar to show on the other pages as well.

<li class="inline mr-10">
    <button data-modal-target="login_modal" data-modal-toggle="login_modal" id="open-login_modal" class="inline-flex text-palettewhite no-underline hover:border-b-[2px] border-red-600">Login</button>
    {% include 'pages/login_modal.html' %}
</li>
<li class="inline">
    <button data-modal-target="signup_modal" data-modal-toggle="signup_modal" id="open-signup_modal" class="inline-flex shadow-sm border px-3 py-2 rounded-lg border-logored font-semibold text-palettewhite hover:bg-logored">Sign up</button>
</li>