Why is mix-blend-mode: difference; not working on my SVG logo?

I’m trying to apply mix-blend-mode: difference; to an SVG logo when it overlaps a specific section of my webpage, but it’s not working. The blend mode doesn’t seem to have any effect.

Here’s what I have:

An SVG logo wrapped in <div class="logo">.
A section with data-bg="effect" where I want the blend mode effect to apply.
JavaScript that adds the effect class to the logo when it overlaps the section.

HTML:

<div class="logo">
  <svg width="100%" viewBox="0 0 565 141" xmlns="http://www.w3.org/2000/svg">
    <!-- SVG content with paths using fill="currentColor" -->
  </svg>
</div>

<div class="mask-bg" data-bg="effect">
  <!-- Section content -->
</div>

CSS:

.logo {
  color: black;
  isolation: isolate;
}

.logo.effect {
  mix-blend-mode: difference;
}

JavaScript:

const logo = document.querySelector('.logo');
const sections = document.querySelectorAll('.mask-bg');

function updateLogoClasses() {
  sections.forEach((section) => {
    const sectionRect = section.getBoundingClientRect();
    // Check if the logo overlaps the section
    if (/* overlap condition */) {
      const bg = section.dataset.bg;
      logo.classList.remove('effect');
      if (bg === 'effect') {
        logo.classList.add('effect');
      }
    }
  });
}

window.addEventListener('scroll', updateLogoClasses);
window.addEventListener('resize', updateLogoClasses);
updateLogoClasses();

Problem:

When the logo has the effect class, the mix-blend-mode: difference; doesn’t work on the SVG logo. The blending doesn’t happen.

What I’ve tried:
Confirmed that the effect class is applied to the logo.
Ensured SVG paths use fill="currentColor".
Added isolation: isolate; to the .logo class.
Tried different colors and blend modes.
Wrapped the SVG in a <div>.

Question:
Why is mix-blend-mode: difference; not affecting my SVG logo, and how can I make it work?