Ошибка в методе filter

import React from 'react';
import axios from 'axios';
import Card from "./components/Card/Card";
import Header from "./components/Header";
import Drawer from "./components/Drawer";

const arr=[];

function App() {
    const [items, setItems] = React.useState([]);
    const [cartItems, setCartItems] = React.useState([]);
    const [searchValue, setSearchValue] = React.useState('');
    const [cartOpened, setCartOpened] = React.useState(false);

    React.useEffect(() => {
     axios.get('https://632f49ebb56bd6ac45ae29cb.mockapi.io/items')
        .then((res)=>{
            setItems(res.data);
        });
        axios.get('https://632f49ebb56bd6ac45ae29cb.mockapi.io/cart')
        .then((res)=>{
            setCartItems(res.data);
        });
   }, []);

   const onAddToCart=(obj)=>{
    axios.post('https://632f49ebb56bd6ac45ae29cb.mockapi.io/cart', obj)
    .then((res)=>{
        setItems(res.data);
    });
    setCartItems(prev =>[...prev, obj]);
   }
   
  const onChangeSearhInput=(event)=>{
    setSearchValue(event.target.value);
  }
  return (
    <div className="wrapper clear">
{cartOpened? <Drawer items={cartItems} onClose={()=>setCartOpened(false)}/> : null}
   
  <Header onClickCart={()=>setCartOpened(true)}/>

<div className="content p-40">
<div className="d-flex align-center justify-between">
   <h1 className="mb-40">{searchValue? `Поиск по ${searchValue}`:"Все кроссовки"}</h1> 
   <div className="search-block d-flex align-center">
    <img src="/images/search.png" width={20} height={20} alt="Search" />
    {searchValue? <img className='removeBtn-s' onClick={()=>setSearchValue('')} src="/images/btn-remove.svg" alt="remove" />:null}
    <input onChange={onChangeSearhInput} value={searchValue} placeholder="Поиск..." type="text" />
    </div> 
</div>
   
    
<div className="d-flex flex-wrap">
  >> Ругается на эту функцию притом что массив существует по ссылкам в mockapi, с fetch выдает ту же самую ошибку>>  {
   items.filter((item)=>item.name.toLowerCase().includes(searchValue.toLowerCase())).map((item, index)=>(
        <Card
        key={index}
        title={item.name} 
        price={item.price}
        imageUrl={item.imageUrl}
        onFavorite={()=>console.log('Нажали сердечко')}
        onPlus={(obj)=>onAddToCart(obj)}
        />
        
    ))
}

</div>

</div>
</div>
  );
}

export default App;

function Drawer({onClose, items=[]}) {
    return(
<div className="overlay">
          <div className="drawer d-flex flex-column">
            <h2 className="d-flex justify-between mb-30">Корзина <img onClick={onClose} className='removeBtn mr-10' src="/images/btn-remove.svg" alt="remove" /></h2>
            <div className="items">
            { items.map((obj)=> (
                <div className="cartItem d-flex align-center justify-between mb-20">
                <div style={{backgroundImage: `url(${obj.imageUrl})`}} className="cartItemImg"></div>
            <div className="mr-20">
            <p className="mb-5">{obj.title}</p>
            <b>{obj.price} руб.</b>
            </div>  
            <img className='removeBtn cu-p mr-10' src="/images/btn-remove.svg" alt="remove" />
            </div>
            
                ))
            }
            </div>
           
           <ul className='cartTotal'>
            <li className='d-flex'>
                <span>Итого:</span>
                <div></div>
                <b>5998 руб.</b>
            </li>
            <li className='d-flex'>
                <span>Налог 5%:</span>
                <div></div>
                <b>299,9 руб.</b>
            </li>
           </ul>
           <button className='greenButton'><img src="/images/arrow.svg" alt="arrow" />Оформить заказ</button>
        
        </div>
        </div>
    );
} 
export default Drawer;