React prevent body from scrolling if popup is open

You can use the body-scroll-lock library to help you with that.
Here is how it could work on your component. I haven't tested it tho.

import { useState, useRef, useEffect } from 'react';
import {
  disableBodyScroll, 
  enableBodyScroll, 
  clearAllBodyScrollLocks 
} from 'body-scroll-lock';

function FilterButton() {
  const [isOpen, setIsOpen] = useState(false);
  const popupRef = useRef(null)

  useEffect(() => {
    if (isOpen) {
      popupRef.current && disableBodyScroll(popupRef.current)
    } else {
      popupRef.current && enableBodyScroll(popupRef.current)
    }
  }, [isOpen])

  return (
    <div className="filter-button">
      <div className="name-filter" onClick={() => setIsOpen(!isOpen)}>
        <p>Filter</p>
        <i class="fas fa-filter"></i>
      </div>
      {isOpen ? (
        <div className="background-blur">
          <div className="filter-popup" ref={popupRef}>
            <p className="filter-by-name">Filter By Type</p>
            <hr />
            <div className="filter-types">
              <div className="filter">
                <input type="checkbox" />
                <p></p>
              </div>
            </div>
            <div className="apply-cancel">
              <button className="apply">Apply</button>
              <button className="cancel" onClick={() => setIsOpen(!isOpen)}>
                Cancel
              </button>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}