Vuejs 3: Increase and decrease z-index on button click

I’m trying to increase and decrease z-index on button click. For example, I need to increase z-index on the div when I go to the next page (class turn with animation adds), and decrease z-index when I go to prev page (class turn removes):

// ViewBook.vue - template
<div
   class="book__page book__page--right"
   :class="{ turn: pageStates.page3 }"
   :style="calcZIndex('page3')">
   <ViewSomeContact :togglePageState="togglePageState" />
</div>
//...(more pages following)

What I tried to do:

// ViewBook.vue - script
const pageStates = ref({
    page3: false,
    page2: false,
    page1: false,
});

const calcZIndex = page => {
    const index = Object.keys(pageStates.value).findIndex(p => p === page);
    if (pageStates.value === true) {
        setTimeout(() => {
            {
                return { zIndex: 20 + index };
            }
        }, 500);
    } else {
        setTimeout(() => {
            {
                return { zIndex: 20 - index };
            }
        }, 500);
    }
};

const togglePageState = page => {
    pageStates.value[page] = !pageStates.value[page];
};

And then I just provide the calcZIndex, inject in the button component and call it on button click. But it seems like it doesn’t work as intended:

// ItemTurnBtn.vue - template
<template>
    <button class="book__nav-btn" @click="handleButtonClick">
        <slot> </slot>
    </button>
</template>

<script setup>
import { inject } from 'vue';
    const calcZIndex = inject('calcZIndex');
    
    const handleButtonClick = () => {
        playSfx();
        calcZIndex();
    };
</script>

I’m looking for a possible solution. Let me know if you find a way to do it.