How to use with useRef?

See following simple example code:

'use client';

import { useRef } from 'react';
import { Toast } from 'primereact/toast';
import { useBetween } from 'use-between';

export const useSharedToast = () => useBetween(useRef<Toast>);

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const toast = useSharedToast();

  return (
    <html lang='de'>
      <body>
        {children}
        <Toast ref={toast} />
      </body>
    </html>
  );
}

This gives me the error: Type 'MutableRefObject<Toast | undefined>' is not assignable to type 'LegacyRef<Toast> | undefined'. I know I should initialize useRef with null, but I don't know how to do that with useBetween. I didn't find any examples with useRef, though it's listed as a supported hook.

How can I do this?

betula / use-between

How to use with useRef? #45