Why are state changes in my custom hook not being read? - reactjs

Question

I'm building an audio player in React and I'm using a custom hook (useQueueHandler) to handle the logic of adding songs to the queue, skipping songs, etc.
I store the queue as state in useQueueHandler and pass down to my component a loadNextSong function which checks if there's a song in my queue and if so it changes the currentSong to the first song in queue. But the loadNextSong function can't see the songs I add to the queue.
I'm aware that a re-render is needed to see state changes, but I've tried forcing a state change in my loadNextSong function before checking the queue and I still can't see the updated queue state so I might not understand how or where I need to do a re-render.
Edit: Sorry, the code that actually runs the addSongToQueue function is in another component. But for simplicity I've added a button so you can see a static song being pushed as an example
AudioPlayer.js component
import useQueueHandler from "../hooks/useQueueHandler.js";
const AudioPlayer = () => {
const {userQueue, loadNextSong, addSongToQueue} = useQueueHandler()
return (
<div>
<div>
<button onClick={() => addSongToQueue({songTitle : "Angeles"})}
</div>
<div>
<button onClick={() => loadNextSong()}></button>
</div>
</div>
)
useQueueHandler custom hook
export default function useQueueHandler() {
const [currentSong, newCurrentSong] = useState({});
const [userQueue, setUserQueue] = useState([]);
const addSongToQueue = (song) => {
setUserQueue((prevState) => [...prevState, song]);
}
const loadNextSong = () => {
if (userQueue.length > 0) {
console.log(userQueue)
}
}
return {userQueue, loadNextSong, addSongToQueue}
}