Zustand Nextjs State Management Issue

Question

this is my Zustand Archive:

import { create } from "zustand";
import { getAllConsulstByStatusAPI } from "../lib/APICatalog";

interface ConsultState {
    waitingConsults: Array<any>;
    pendingPayConsults: Array<any>;
    attendingConsults: Array<any>;
    paidConsults: Array<any>;
    getWaitingConsults: () => void;
    getPendingPayConsults: () => void;
    getAttendingConsults: () => void;
    getPaidConsults: () => void;
}

const useConsultsStore = create<ConsultState>((set) => ({
    waitingConsults: [],
    pendingPayConsults: [],
    attendingConsults: [],
    paidConsults: [],

    getWaitingConsults: async () => {
        const data = await getAllConsulstByStatusAPI({ status: "NEW" });
        set({ waitingConsults: data.consults });
    },
    getPendingPayConsults: async () => {
        const data = await getAllConsulstByStatusAPI({ status: "PENDING" });
        set({ pendingPayConsults: data.consults });
    },
    getAttendingConsults: async () => {
        const data = await getAllConsulstByStatusAPI({ status: "ATTENDING" });
        set({ attendingConsults: data.consults });
    },
    getPaidConsults: async () => {
        const data = await getAllConsulstByStatusAPI({ status: "PAID" });
        set({ paidConsults: data.consults });
    },
}));

export default useConsultsStore;

the objective es to get the consults using the status, and set the result (array) on the respective state to be used in the follow component:

"use client";
import { useEffect, useState } from "react";

import CardHorizontal from "../atoms/CardHorizontal";
import { PatientIcon } from "@/app/lib/jjIcons";

import useConsultsStore from "@/app/store/Consult";

type Props = {
    filter: string;
};

export default function ConsultList({ filter }: Props) {

    const getConsultsWaiting = useConsultsStore((state) => state.getWaitingConsults);
    const getConsultsPaymentPending = useConsultsStore(
        (state) => state.getPendingPayConsults,
    );
    const getConsultsPaid = useConsultsStore((state) => state.getPaidConsults);
    const getConsultsAttending = useConsultsStore((state) => state.getAttendingConsults);

    const waiting = useConsultsStore((state) => state.waitingConsults);
    const pending = useConsultsStore((state) => state.pendingPayConsults);
    const paid = useConsultsStore((state) => state.paidConsults);
    const attending = useConsultsStore((state) => state.attendingConsults);

    const [list, setList] = useState<Array<{ [key: string]: string }>>([]);

    useEffect(() => {
        switch (filter) {
            case "WAITING":
                getConsultsWaiting();
                setList(waiting);
                break;
            case "ATTENDING":
                getConsultsAttending();
                setList(attending);
                break;
            case "PENDING":
                getConsultsPaymentPending();
                setList(pending);
                break;
            case "PAID":
                getConsultsPaid();
                setList(paid);
                break;

            default:
                setList([]);
                break;
        }
    }, [filter]);

    return (
        <div className='flex flex-col gap-4'>
        {JSON.stringify(list)}
        </div>
    );
}

So I want to change de LIST state depending on the filter that is passed as a prop of the component , but I got:

[]

I checked the response from the api and it works it puts on the state the result.

The problem I think it was the "Timing" , when the state is rendered it has the initial state [] but it does not change when the filter is apply...

I want to use the prop of the component as a 'trigger' to make a Zustand Call and put the result state on the "List" dynamically.

What is wrong on my code?