Parent Container Values not Updating as Expected

Project Background (Feel free to skip):
I am trying to make an idle game that uses SetIntervals to perform processes every so often and essentially pass an object down the line from one process to another, and so on. I am planning on having 3 levels (Purgatory, Heaven, and Hell which are all sibling components under a parent container), the objects starts and is generated in purgatory, and based on a soul’s characteristics (good or bad) you get sent from purgatory to Heaven / Hell.

I am currently stuck appending the object sent from child to parent to an array in a state object. When I am appending the object to the end of the array, I have an output in my return that displays array.length for both state queues. It seems like the component may not be fully rendering as sometimes the values update, and sometimes they dont, and I am not sure why.

I am newer to react, so there maybe an interaction that I am missing here, so any help / advice / criticisms are welcome

Component structure:

• Content
  • Heaven
  • Purgatory (Child Sending to Parent)
  • Hell

Purgatory Callback:

    
export default function Purgatory(params) {
    const { handleAscension, handleDescension } = params;

    ...
    ...

    const handleDecision = (id, decision, soul) => {
        // Here we need to do the same as above. empty the one from the queue, and move to next step. probably return an object containing both the soul and the boolean "decision"

        if (decision) {
            console.log("Final: Ascended");
            handleAscension(soul);
        } else {
            console.log("Final: Descended");
            handleDescension(soul);
        }
    };
}

Content handler methods:

    const handleDescension = (soul) => {
        let descensionData = soulsDescending;

        if (descensionData.queue.length >= descensionData.maxQueueLength) {
            console.log(
                "No room in the Ascension queue. This soul is left to roam in purgatory"
            );
            return;
        }

        descensionData.queue = [...descensionData.queue, soul];
        setSoulsDescending(descensionData);
    };

    const handleAscension = (soul) => {
        let ascensionData = soulsAscending;

        if (ascensionData.queue.length >= ascensionData.maxQueueLength) {
            console.log(
                "No room in the Ascension queue. This soul is left to roam in purgatory"
            );
            return;
        }

        ascensionData.queue = (soulsAscending) => [
            ...soulsAscending.queue,
            soul,
        ];
        setSoulsAscending(ascensionData);
    };

    return (
        <>
            <Shop />
            <Heaven soulsAscending={soulsAscending.queue} />
            <p>Heaven Queue: {soulsAscending.queue.length}</p>

            <Purgatory
                handleAscension={handleAscension}
                handleDescension={handleDescension}
            />

            <p>Hell Queue: {soulsDescending.queue.length}</p>
            <Hell soulsDescending={soulsDescending.queue} />
        </>
    );