BUG when rendering data by category in reactjs

Question

So, i have a dynamic data from redux state...this data can be delete by user and show the realtime data.

I make a filter button for my data (all, frontend, backend).Actually about 50% it works, i can see the data when the category is changing...but when i am in ex. frontend (filter) than i delete some data from that, then all the data show(without deleted data) although the filter still in frontend.

check the website on favorite page, add to favorite some packages first.

installing-app.vercel.app

const dataPackages = useSelector((state) => state.favorite.packages);
const [defaultData, setDefaultData] = useState([])
const [favoritesPkg, setFavoritesPkg] = useState([]);
const [category, setCategory] = useState("all")

 // load data from local
useEffect(() => {
    console.log("effect", category)
    setDefaultData(dataPackages)
    setFavoritesPkg(dataPackages)
}, [dataPackages])

const handleSelectedCategory = (e) => {
    setCategory(e.target.value)
        if(e.target.value == "all"){
            setFavoritesPkg(defaultData)
        }else{
            const filteredData = defaultData.filter(pkg => pkg.type == e.target.value)
            setFavoritesPkg(filteredData)
        }
}

return(...
<select className="bg-gray-50 border border-gray-300 px-2" onChange={handleSelectedCategory}>
    <option value="all">All</option>
    <option value="frontend">Frontend</option>
    <option value="backend">Backend</option>
</select>

 <div className="lg:flex mx-auto lg:flex-wrap gap-x-5 justify-center">
    {favoritesPkg?.map((pkg) => (
    <FavoriteCode data={pkg} key={pkg.id} />
    ))}
</div>

when the filter is in frontend, then i delete some data from those, i see the realtime data of frontend not all the data.