How to use the reakit-utils/useLiveRef.useLiveRef function in reakit-utils

initialState: SealedInitialState> = {}
): unstable_FormStateReturn {
  const {
    values: initialValues = {} as V,
    validateOnBlur = true,
    validateOnChange = true,
    resetOnSubmitSucceed = false,
    resetOnUnmount = true,
    onValidate,
    onSubmit,
    ...sealed
  } = useSealedState(initialState);
  const onValidateRef = useLiveRef(
    typeof initialState !== "function" ? initialState.onValidate : onValidate
  );
  const onSubmitRef = useLiveRef(
    typeof initialState !== "function" ? initialState.onSubmit : onSubmit
  );

  const id = unstable_useIdState(sealed);

  const [{ initialValues: _, ...state }, dispatch] = React.useReducer(reducer, {
    initialValues,
    values: initialValues,
    touched: {},
    errors: {},
    messages: {},
    valid: true,
    validating: false,
    submitting: false,
    submitFailed: 0,
    submitSucceed: 0

export function unstable_useFormState>(
  initialState: SealedInitialState> = {}
): unstable_FormStateReturn {
  const {
    values: initialValues = {} as V,
    validateOnBlur = true,
    validateOnChange = true,
    resetOnSubmitSucceed = false,
    resetOnUnmount = true,
    onValidate,
    onSubmit,
    ...sealed
  } = useSealedState(initialState);
  const onValidateRef = useLiveRef(
    typeof initialState !== "function" ? initialState.onValidate : onValidate
  );
  const onSubmitRef = useLiveRef(
    typeof initialState !== "function" ? initialState.onSubmit : onSubmit
  );

  const id = unstable_useIdState(sealed);

  const [{ initialValues: _, ...state }, dispatch] = React.useReducer(reducer, {
    initialValues,
    values: initialValues,
    touched: {},
    errors: {},
    messages: {},
    valid: true,
    validating: false,

export function useEventListenerOutside(
  containerRef: React.RefObject,
  disclosuresRef: React.RefObject,
  nestedDialogs: Array>,
  eventType: string,
  listener?: (e: Event) => void,
  shouldListen?: boolean
) {
  const listenerRef = useLiveRef(listener);

  React.useEffect(() => {
    if (!shouldListen) return undefined;

    const handleEvent = (event: Event) => {
      if (!listenerRef.current) return;

      const container = containerRef.current;
      const disclosures = disclosuresRef.current || [];
      const target = event.target as Element;

      if (!container) {
        warning(
          true,
          "[reakit/Dialog]",
          "Can't detect events outside dialog because `ref` wasn't passed to component.",