Панель навигации с размытием не показывает эффект, когда за ней находится элемент с каким-либо типом анимации?

Я исчерпал свои мозговые способности, так как сейчас 2 часа ночи, поэтому я здесь, чтобы спросить, есть ли у кого-нибудь решение этой проблемы, которая привлекла мое внимание. Я использую машинописный текст, кадрирование движения и попутный ветер для создания личного портфолио. Моя фиксированная нижняя панель навигации имеет эффект размытия фона, но этот эффект, кажется, полностью исчезает, когда за ним стоит что-то с какой-либо анимацией.

есть ли какое-либо известное решение этой проблемы?

один элемент размывается, а анимированный — нет

Вот мой код панели навигации. Возможно, есть другой способ размытия, который исправит это, но я, честно говоря, потерян, любая помощь приветствуется :)

export default function NavBar() {
  return (
    <div className = "flex justify-center self-center">
      <div className = " bg-[#6d6d6d] /15 shadow-md shadow-black/[0.03] fixed bottom-20  backdrop-blur-[0.3rem] bg-opacity-20 rounded-2xl h-full w-full max-w-[350px] max-h-[65px] justify-center px-3 flex">
        <ul className = "flex items-center justify-center gap-6">
          {links.map((link) => (
            <motion.li
              key = {link.hash}
            >
              <Link
                className = "hover:text-[#b1afae] transition"
                href = {link.hash}
              >
                {link.name}
              </Link>
            </motion.li>
          ))}
        </ul>
      </div>
    </div>
  );
}

Я не пробовал много решений, потому что пока не нашел ни одного :(