A non-serializable value was detected in the state when initial zegoCloud data

Question

This is my code from Home.js. Basically I want in the first time login to homepage will dispatch(setZego(zp)) value.

useEffect(() => {
        if (currentUser) {
            init();
        }
    }, []);

    async function init() {
        const userID = currentUser?.Username;
        const userName = 'userName' + userID;
        const { token } = await generateToken('https://node-express-vercel-master-one.vercel.app', userID);
        const KitToken = ZegoUIKitPrebuilt.generateKitTokenForProduction(1980920521, token, null, userID, userName);
        zp = ZegoUIKitPrebuilt.create(KitToken);
        zp.addPlugins({ ZIM });
        dispatch(setZego(zp));
    }
    async function generateToken(tokenServerUrl, userID) {
        return fetch(`${tokenServerUrl}/api/userID/${userID}`, {
            method: 'GET',
        }).then((res) => res.json());
    }

This is my chatSlide

const chatSlice = createSlice({
    name: 'chat',
    initialState: {
        zego: null,
    },
    reducers: {
        setZego: (state, action) => {
            state.zego = action.payload;
        },
    },
});

export const { setZego } = chatSlice.actions;

But when I login to homepage. The error occurs like this.

Is there anyway thi fix this? I'm been stuck with this 2 days but no answer. Thanks you all and hope you have great day.

And also when I console.log(zp) it like this

This is where I call the zp.sendCallInvitation

  const zp = useSelector((state) => state.chat.zego);
    const { coachId } = useParams();
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const chatId = useSelector((state) => state.chat.chatId);

    function handleSend(callType) {
        const targetUser = {
            userID: user?.username,
            userName: user?.username,
        };
            zp.sendCallInvitation({
                callees: [targetUser],
                callType: callType,
                timeout: 60,
            }),
        
            .then((res) => {
                console.warn(res);
            })
            .catch((err) => {
                console.warn(err);
            });
    }