I have to click 2 times to the link in mobile view of my Next JS application in order to change routes

Question

I am building a Next JS application,

On the desktop view, there is no problem, but when it changes to the mobile view after a scroll event or changing routes when I want to click on a link/button, etc. I need to click two times on it. I am suspicious that after an event, the focus on the page is being lost, but there is no overflow or something. I couldn't figure out where the focus was gone.

Here is an example of my code

 <Link href={storyUrl}>
        <a className="group inline-flex flex-col mb-4 md:mb-11 space-y-2 ">
          <div className="flex items-center gap-2">
            {isDeleted && (
              <div className="group">
                <Info className="text-slate-400" />
                <div className="hidden rounded-lg p-2 text-xs bg-gray-100 absolute z-50 group-hover:block shadow-md w-48 mt-5">
                  This story has been deleted or in draft
                </div>
              </div>
            )}

            {draft && (
              <span className="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-purple-50 text-purple-800">
                Draft
              </span>
            )}
            <h2
              className={`text-slate-900 text-3xl font-semibold leading-9 tracking-md transition ease-in-out duration-150 group-hover:text-purple-700 ${
                isDeleted ? 'line-through' : ''
              }`}
            >
              {title}
            </h2>
          </div>
          <p className="text-slate-500 text-sm tracking-sm line-clamp-2 break-words w-full xl:w-[600px]  ">
            {infoText}
          </p>
        </a>
      </Link>

Thanks for any responses in advance

I tried to change the Links to the router.push but as I thought it was irrelevant.