Typescript in Autocomplete for containerRef, panelRootRef, rootRef

[leorawe]

I need Typescript types for containerRef, panelRootRef, and rootRef in the autocomplete code.

  const containerRef = React.useRef(null);
  const panelRootRef = React.useRef(null);
  const rootRef = React.useRef(null);

I get complaints for panelRootRef.current?.unmount(): "Property 'unmount' does not exist on type 'never'"
I tried:

const containerRef: MutableRefObject<HTMLDivElement | null> = React.useRef(null);
const panelRootRef: MutableRefObject<HTMLDivElement | null> = React.useRef(null);
const rootRef: MutableRefObject<HTMLDivElement | null> = React.useRef(null);

Those didn't work.

[leorawe]

I found this autocomplete code that has typescript already, so I don't need to struggle with converting React to Typescript:
https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/react-instantsearch-hooks?file=/src/App.tsx

[leorawe]

It turns out I do need the types for those const because React 18 needs them.

I found this works:
import { createRoot, Root } from "react-dom/client";

  const containerRef = useRef<HTMLDivElement | null>(null);
  const panelRootRef = useRef<Root | null>(null);
  const rootRef = useRef<HTMLElement | null>(null);