Problem with icons appearing in tailwind navbar - React

I'm using a tailwind navbar and I'm having this problem. When in mobile mode the icons overlap and get this weird look.

Does anybody know how to solve this?

Code mobile view

<Transition
  show={isOpen}
  enter="transition ease-out duration-100 transform"
  enterFrom="opacity-0 scale-95"
  enterTo="opacity-100 scale-100"
  leave="transition ease-in duration-75 transform"
  leaveFrom="opacity-100 scale-100"
  leaveTo="opacity-0 scale-95"
>
  {(ref) => (
    <div className="md:hidden" id="mobile-menu">
      <div ref={ref} className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
        <Link
           to="/home" href="/"
          
        ><p 
        className="cursor-pointer text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"> 
          Home
        </p>
        </Link>

        <a
          href="youtube"
          className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
        >
          sector A
        </a>

        <a
          href="instagram"
          className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
        >
          sector B
        </a>

        <a
          href="facebook"
          className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
        >
          sector C
        </a>

        <a
          href="tiktok"
          className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
        >
          sector D
        </a>
      </div>
    </div>
  )}
    </Transition>

I'm using a tailwind navbar and I'm having this problem. When in mobile mode the icons overlap and get this weird look.

Does anybody know how to solve this?