Filtering data from the Apii

I am having a problem filtering data from an API based on their regularPrice. I have already displayed books based on their category name. If you remove the spread operator from useLayoutEffect[...data] you will see the thing I am trying to achieve. This is the error when there is spread operator Data is not being iterable in the useLayoutEffect.Maybe my approach is wrong Any help would be really appreciated. Thank you very much. Here is the sandbox link. https://codesandbox.io/s/peaceful-spence-48q9f

import React, {useState, useEffect} from 'react'
import URL from '../utilis/URL';
const BookContext = React.createContext();
export default function BooksProvider({ children }) {
  
  const [data, setData] = useState([])
  const [filters, setFilters]= useState({
    regularPrice:"all",
    length:""
   
  })
  
  /*fetching data */ 
  const fetchData = async () => {
    const response = await fetch(URL);
    const result = await response.json();  
    console.log(result)
    setData(result);
  };

  useEffect(()=>{
    fetchData();
  },[])

  const updateFilters = e => {
    const type = e.target.type;
    const filter = e.target.name;
    const value = e.target.value;
    let filterValue;
    if (type === "checkbox") {
      filterValue = e.target.checked;
    } else if (type === "radio") {
      value === "all" ? (filterValue = value) : (filterValue = parseInt(value));
    } else {
      filterValue = value;
    }
    setFilters({ ...filters, [filter]: filterValue });
  };

  /* filtering price books */ 
  React.useLayoutEffect(() => {
    let newBooks = [...data].sort((a, b) => a.regularPrice - b.regularPrice);
    const { regularPrice } = filters;  
    if (regularPrice !== "all") {
      newBooks = newBooks.filter(item => {
        if (regularPrice === 0) {
          return item.regularPrice <10;
        } else if (regularPrice === 10) {
          return item.regularPrice > 10 && item.regularPrice < 20;
        } else {
          return item.regularPrice > 20;
        }
      });
    }
  }, [filters, data]);

return (
    <BookContext.Provider value={{ data, filters, regularPrice, updateFilters, handleSelectCategory, setCurrentSelectedCategory, currentSelectedCategory }}>
      {children}
    </BookContext.Provider>
  );
}
export {BookContext, BooksProvider}

Filters

import React, { useContext } from 'react'
import { BookContext } from '../../context/books'

const Filters = () => {
    const {filters:{regularPrice, updateFilters}}= useContext(BookContext)
    return (
        <div>
              <p>Regular Price</p>
          <label>
            <input
              type="radio"
              name="regularPrice"
              id="all"
              value="all"
              checked={regularPrice === "all"}
              onChange={updateFilters}
            />
            all
          </label>
          <label>
            <input
              type="radio"
              name="regularPrice"
              value="0"
              checked={regularPrice === 0}
              onChange={updateFilters}
            />
            $0 - $10
          </label>
          <label>
            <input
              type="radio"
              name="regularPrice"
              value="10"
              checked={regularPrice === 10}
              onChange={updateFilters}
            />
            $10 - $20
          </label>
          <label>
            <input
              type="radio"
              name="regularPrice"
              value="20"
              checked={regularPrice === 20}
              onChange={updateFilters}
            />
            Over $20
          </label>
       
        </div>
    )
}

export default Filters