How to use the @zendeskgarden/react-theming.getDocument function in @zendeskgarden/react-theming

componentDidUpdate(prevProps, prevState) {
    const current = this.props.focusedKey === undefined ? this.state : this.props;
    const prev = prevProps.focusedKey === undefined ? prevState : prevProps;
    const doc = getDocument ? getDocument(this.props) : document;

    /**
     * We must programatically scroll the newly focused element into view.
     * Side-effect of the `aria-activedescendant` accessibility strategy.
     */
    if (typeof current.focusedKey !== 'undefined' && current.focusedKey !== prev.focusedKey) {
      const itemNode = doc.getElementById(this.getItemId(current.focusedKey));

      /* istanbul ignore if */
      if (itemNode) {
        scrollTo(itemNode);
      }
    }
  }

getDocuments = () => {
    const doc = getDocument ? getDocument(this.props) : document;
    const iframes = doc.querySelectorAll('iframe');

    return [...iframes].reduce(
      (documents, iframe) => {
        try {
          if (iframe.contentDocument) {
            return [...documents, iframe.contentDocument];
          }
        } catch (e) {} // eslint-disable-line no-empty

        return documents;
      },
      [doc]
    );
  };

componentDidUpdate(prevProps, prevState) {
    const { focusedKey } = this.getControlledState();
    const previousFocusedKey = this.isControlledProp('focusedKey')
      ? prevProps.focusedKey
      : prevState.focusedKey;

    /**
     * We must programatically scroll the newly focused element into view.
     * Side-effect of the `aria-activedescendant` accessibility strategy.
     */
    if (typeof focusedKey !== 'undefined' && focusedKey !== previousFocusedKey) {
      const doc = getDocument ? getDocument(this.props) : document;
      const itemNode = doc.getElementById(this.getItemId(focusedKey));

      /* istanbul ignore if */
      if (itemNode) {
        setTimeout(() => {
          scrollTo(itemNode);
        }, 0);
      }
    }
  }

getInitialFocusNode = () => {
    const doc = getDocument ? getDocument(this.props) : document;
    const activeElem = activeElement(doc);

    return this.container.contains(activeElem) ? activeElem : this.container;
  };

addDragEvents = () => {
    const themedDocument = getDocument(this.props);

    themedDocument.addEventListener('mousemove', this.onDocumentMouseMove);
    themedDocument.addEventListener('mouseup', this.removeDragEvents);
  };

minValue,
  maxValue,
  disabled,
  step,
  onChange,
  ...otherProps
}) => {
  const [isMinThumbFocused, setIsMinThumbFocused] = useState(false);
  const [isMaxThumbFocused, setIsMaxThumbFocused] = useState(false);
  const [railWidthPx, setRailWidthPx] = useState(0);
  const [isMousedDown, setIsMousedDown] = useState(false);
  const trackRailRef = useRef();
  const minThumbRef = useRef();
  const maxThumbRef = useRef();

  const themedDocument = getDocument(otherProps);
  const rtl = isRtl(otherProps);

  /**
   * The window resize event is debounced to reduce unnecessary renders
   */
  const onWindowResize = useCallback(
    debounce(() => {
      setRailWidthPx(trackRailRef.current.getBoundingClientRect().width);
    }, 100),
    []
  );

  useEffect(() => {
    onWindowResize();

    window.addEventListener('resize', onWindowResize);

removeDragEvents = () => {
    const themedDocument = getDocument(this.props);

    themedDocument.removeEventListener('mousemove', this.onDocumentMouseMove);
    themedDocument.removeEventListener('mouseup', this.removeDragEvents);
  };

};
            const TooltipElem = type === TYPE.LIGHT ? LightTooltip : TooltipView;

            const tooltip = (
              
                {children}
              
            );

            if (appendToBody) {
              return createPortal(tooltip, getDocument(otherProps).body);
            }

            return tooltip;
          }}