Zendesk chat disappears on page change - NextJS implementation

Hi, 

I'm adding zendesk chat script to a NextJS 13 application. When the page change, the <iframe> of the chat is gone. Chat box disappears. How can i fix it? 

I have posted this question with my implementations earlier here. I'm taking the advice from a reply in this post to manage the visibility of the Zendesk chat widget manually with the latest next app router changes (usePathname).

But I wonder how I can hide and show the widget. In my code, I'm initializing and invoking window.ZAFClient in my useZafClient hook. But it is always undefined even chat widget appears on first page load.

This is how my `useZafClient` hook is set up:

'use client';

import { useEffect, useState } from 'react';

let zafClient = null;

export function useZafClient() {

  const [client, setClient] = useState(zafClient);

  useEffect(() => {

    if (!client && typeof window.ZAFClient !== 'undefined') {

      zafClient = window.ZAFClient.init();

      console.log({ zafClient }, 'init');

      setClient(zafClient);

      if (zafClient) {

        console.log('invoke');

        zafClient.invoke('resize', { width: '100%', height: '200px' });

      }

    }

  }, [client]);

  return client;

}