Having trouble getting a custom hook to work with Redux Toolkit - reactjs

Question

As you can tell from the code, I'm trying to make a custom hook that would sort the rendered cards.
When the cards first render, they show up in the default order from the API, but they get sorted only after forcing a re-render, usually by pressing Ctrl+S to save so Vite registers a change.
I'm new to custom hooks so I don't really know what I'm doing wrong, probably a problem with the dispatches inside the useEffect? How can I get the cards to sort properly?
This is the custom hook:
import { useEffect, useState } from 'react';
// Redux
import { getAllBosses, SortBosses } from '../redux/slices/Bosses';
import { useDispatch, useSelector } from 'react-redux';
export default function useFetch(value) {
const dispatch = useDispatch();
const { list: bosses } = useSelector(state => state.bosses);
const [type, setType] = useState([]);
useEffect(() => {
value === 'default'
? dispatch(getAllBosses())
: dispatch(SortBosses(value));
setType(bosses);
}, [value]);
return type;
}
And this is the component:
import { useEffect, useState } from 'react';
// Redux
// import { getAllBosses } from '../../redux/slices/Bosses';
// import { useDispatch, useSelector } from 'react-redux';
// components
import { BossCard, Loading, Pagination, Error } from '#components';
import { useFetch } from '../../hooks';
import { Cards } from '#components/styles/Cards.style';
function BossesList() {
// const dispatch = useDispatch();
const bosses = useFetch('ztoa');
const [currentPage, setCurrentPage] = useState(1);
const bossPerPage = 8;
const indexOfLastBoss = currentPage * bossPerPage;
const indexOfFirstBoss = indexOfLastBoss - bossPerPage;
const currentBosses = bosses.slice(indexOfFirstBoss, indexOfLastBoss);
const pages = pageNumber => {
setCurrentPage(pageNumber);
};
// useEffect(() => {
// dispatch(getAllBosses());
// }, [dispatch]);
useEffect(() => {
setCurrentPage(1);
}, [bosses]);
return (
<>
<Cards>
{currentBosses.length !== 0 ? (
currentBosses.map((boss, index) =>
boss.error ? (
<Error key={index} error={'No boss with that name.'} />
) : (
<BossCard
key={boss.id}
id={boss.id}
name={boss.name}
image={boss.image}
/>
)
)
) : (
<div>
<Loading />
</div>
)}
</Cards>
<Pagination
bossPerPage={bossPerPage}
bosses={bosses.length}
currentBosses={currentBosses}
pages={pages}
currentPage={currentPage}
/>
</>
);
}
export default BossesList;