How to use the @react-md/wia-aria.useKeyboardFocusedClassName function in @react-md/wia-aria

/>
      );
    } else if (!disablePressedFallback) {
      // if the ripple effect was disabled and the default pressed state interactions were
      // also not disabled, we can hook into it there
      const { pressed, eventHandlers } = usePressedStates(providedProps);
      handlers = eventHandlers;
      className = cn(className, {
        "rmd-states--pressed": pressed,
      });
    }

    if (props.id) {
      // if the element is "valid" and has an id, we can also start the keyboard focus only
      // states for the element by merging the class name
      className = cn(className, useKeyboardFocusedClassName(props.id));
    } else if (process.env.NODE_ENV !== "production") {
      console.error(
        "Found a component that does not have an `id` prop, but is wrapped `withStates`. " +
          "This component will be unable to have keyboard focus states applied until this is fixed."
      );
      console.error(new Error().stack);
    }

    // TODO: Look into a better way of fixing color pollution and adding ripples to the component.
    // The problem with this current approach is that if the composed component wraps the children
    // in other components/elements for styling, the ripples and color pollution fixes will not
    // work as expected and positioning will be wrong. The current workaround is to create another
    // wrapper for the "custom" component children and do the wrapping before passing to the WithStates
    // hoc. ListItem is a good example of this. Also has problems with Tooltips :/
    if (preventColorPollution) {
      // note that the `ripplesContainer` is NOT added to the color pollution fix children. if the

timeout={rippleTimeout}
        classNames={rippleClassNames}
      />
    );
  } else if (!disablePressedFallback) {
    // if the ripple effect was disabled and the default pressed state interactions were
    // also not disabled, we can hook into it there
    const { pressed, handlers: h } = usePressedStates(options);
    handlers = h;
    className = cn(className, { "rmd-states--pressed": pressed });
  }

  if (id) {
    // if the element is "valid" and has an id, we can also start the keyboard focus only
    // states for the element by merging the class name
    className = cn(className, useKeyboardFocusedClassName(id));
  }

  // "polyfill" the keyboard click events for elements that are supposed to behave like clickable
  // elements but really aren't. this will make sure to merge existing onKeyDown behaviors from
  // the ripple/pressed effects (if any) or the onKeyDown behavior from props
  if (enableKeyboardClick) {
    handlers = handlers || options.handlers || {};
    const { onKeyDown } = handlers;
    handlers.onKeyDown = (event: React.KeyboardEvent) => {
      if (onKeyDown) {
        onKeyDown(event);
      }

      if (!disableSpacebarClick && event.key === " ") {
        // need to prevent default behavior of screen scrolling
        event.preventDefault();