Buttons not working when viewing my website on Mobile

Question

I'm developing a website using React-Vite,tailwind-css, and flowbite components. When I'm on my laptop, I can press f12 to view my website as a mobile view and everything works fine then but when I use my phone and use localhost to connect, the buttons and such are not working. For example when in mobile view my navbar shrinks and an icon for a dropdown menu appears but it doesn't work when I press it. I'm not sure what files it is to do with but if you need to see anything specific about my code I will send it. Thank you

I tried viewing it on my laptop again to see if the issue was with the mobile view entirely but it seems not to be the case so now I don't know what else I should try. The reason I decided to post this question because as the button is part of a flowbite component, it does not use a function I think like onClick.

Edit: Here are code snippets and screenshots...

FAQ section not dropping down.

Navbar component at top of page.

My Navbar Component

function Navbar() {
  return (
    <nav className="bg-bgmain rounded-2xl">
      <div className="max-w-screen-xl flex flex-wrap items-center justify-between p-4">
        <a href="/" className="flex items-center space-x-3 rtl:space-x-reverse">
          <img src="/logo192.png" className="h-8" alt="Aureate Logo" />
          <span className="self-center text-2xl font-semibold font-body whitespace-nowrap tracking-wider">
            Aureate
          </span>
        </a>

        <div className="flex font-body md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse  ">
          <button
            type="button"
            className="hidden md:block text-white bg-main hover:bg-dark font-medium rounded-lg text-sm px-4 py-2 text-center"
            aria-controls="navbar-cta"
            aria-expanded="false"
          >
            Get started
          </button>
          <button
            data-collapse-toggle="navbar-cta"
            type="button"
            className="md:hidden inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg  hover:bg-secondary focus:outline-none "
            aria-controls="navbar-cta"
            aria-expanded="false"
          >
            <span className="sr-only">Open main menu</span>
            <svg
              className="w-5 h-5"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 17 14"
            >
              <path
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M1 1h15M1 7h15M1 13h15"
              />
            </svg>
          </button>
        </div>
        <div
          className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
          id="navbar-cta"
        >
          <ul className="flex flex-col font-body text-xl font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0">
            <li>
              <Link
                to="/"
                className="block py-2 px-3 md:p-0 rounded md:bg-transparent text-white hover:text-main"
                aria-current="page"
              >
                Home
              </Link>
            </li>
            <li>
              <Link
                to="/about"
                className="block py-2 px-3 md:p-0 text-white rounded md:bg-transparent hover:text-main"
              >
                About
              </Link>
            </li>
            <li>
              <Link
                to="/services"
                className="block py-2 px-3 md:p-0 text-white hover:text-main"
              >
                Services
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
}
    
    export default Navbar;

My FAQ Component

<h2 id="accordion-open-heading-1">
        <button
          type="button"
          className="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-white border border-b-0 rounded-t-xl gap-3"
          data-accordion-target="#accordion-open-body-1"
          aria-expanded="true"
          aria-controls="accordion-open-body-1"
        >
          <span className="flex items-center">
            <svg
              className="w-5 h-5 me-2 shrink-0"
              fill="currentColor"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fillRule="evenodd"
                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
                clipRule="evenodd"
              ></path>
            </svg>{" "}
            <p className=" text-justify">How do I invest?</p>
          </span>
          <svg
            data-accordion-icon
            className="w-3 h-3 rotate-180 shrink-0"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 10 6"
          >
            <path
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M9 5 5 1 1 5"
            />
          </svg>
        </button>
      </h2>