Hey guys
Whatever I fix, There is always a hydration error coming from nowhere
Can anyone tell how to fix it? I couldn't find any source on internet to help it

            {menuItems.map((item, index) => (
            <a 
              key={index}
              href={item.href}
              className={`
                flex flex-row-reverse items-center gap-2 py-2 px-3 rounded-full mt-2
                hover:bg-[#FFF8F0] transition-colors duration-200
                ${pathname === item.href ? 'bg-[#FFF8F0]' : ''}
              `}
            >
              <Image src={item.icon} width={20} height={20} className="w-5 h-5" alt={item.text || 'Icon'} priority/>
              <span>{item.text}</span>
              {item.badge && (
                <span className="bg-[#FB9300] text-white text-xs px-2 py-0.5 rounded-full mr-auto">
                  {item.badge}
                </span>
              )}
            </a>
          ))}
            {/* <a 
              className='flex flex-row-reverse items-center gap-2 py-2 px-2 rounded-full mt-2 hover:bg-[#FFF8F0] transition-colors duration-200 hover:cursor-pointer'
              onClick={() => logoutUser()}
            >
              <img src="/background.svg" className="h-5 w-5" />
              داشبورد خریدار
            </a> */}
            <a 
              className='flex flex-row-reverse items-center gap-2 py-2 px-2 rounded-full mt-2 hover:bg-[#FFF8F0] transition-colors duration-200 hover:cursor-pointer'
              onClick={() => logoutUser()}
            >
              <Image src="/Vector (Stroke) (5).png" width={20} height={20} className="h-5 w-5" alt='Exit btn' priority/>
              خروج
            </a>
          </nav>

This is the part getting the errors, When I use <img> it gives another hydration error, whenever I use alt="" : error, even when I assign an alt it still error
How can I fix it?