Hello i will need help for a mindmap with reactflow i would love to make a thumbnail when the user leave the page or website

this is my function that make a thumbnail with html_to_image and i send it to cloudinary

const Thumbnail = (props: { refHtml: any; mindMapId: string }) => {
  let [isPending, startTransition] = useTransition();
  const { getNodes } = useReactFlow();
  const onClick = () => {
    const nodesBounds = getRectOfNodes(getNodes());
    const transform = getTransformForBounds(
      nodesBounds,
      imageWidth,
      imageHeight,
      0.5,
      2,
    );

    toPng(props.refHtml.current, {
      width: imageWidth,
      height: imageHeight,
    }).then((data: string) => {
      startTransition(() => sendToCloudinary(data, props.mindMapId));
    });
  };

  return (
    <Panel position="top-right">
      <button onClick={onClick}>screenshot</button>
    </Panel>
  );
};
export default Thumbnail;

for now i use a btn to trigger the Thumbnail function for my thumbnail

i have tried to replace with

router.events("routeChangeStart", onClick)

but this doenst exist anymore in nextjs 13.4.1

so i tried with beforeunload Listener

window.addEvenListener("beforeunload", onClick)

But this function work only if someone refresh the page and not when he change route

i have tried to make a personal hook too but its doenst work because it wont let me trigger Thumbnail


and its being execute after the route change not before

function useNavigationEvent() {
   const pathname = usePathname()
   useEffect(() => {
        console.log('before route change')
     }, [pathname])
}

so if you have any idea please let me know