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

const Message = styled.div.attrs(props => ({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION,
  className: classNames(CheckboxStyles['c-chk__message'], {
    [CheckboxStyles['c-chk__message--success']]: props.validation === VALIDATION.SUCCESS,
    [CheckboxStyles['c-chk__message--warning']]: props.validation === VALIDATION.WARNING,
    [CheckboxStyles['c-chk__message--error']]: props.validation === VALIDATION.ERROR,

    // RTL
    [CheckboxStyles['is-rtl']]: isRtl(props)
  })
}))`
  ${props => retrieveTheme(COMPONENT_ID, props)};

const Message = styled.div.attrs(props => ({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION,
  className: classNames(CheckboxStyles['c-chk__message'], CheckboxStyles['c-chk__message--radio'], {
    [CheckboxStyles['c-chk__message--success']]: props.validation === VALIDATION.SUCCESS,
    [CheckboxStyles['c-chk__message--warning']]: props.validation === VALIDATION.WARNING,
    [CheckboxStyles['c-chk__message--error']]: props.validation === VALIDATION.ERROR,

    // RTL
    [CheckboxStyles['is-rtl']]: isRtl(props)
  })
}))`
  ${props => retrieveTheme(COMPONENT_ID, props)};

const StyledCheckMessage = styled.div.attrs(props => ({
  className: classNames(CheckboxStyles['c-chk__message'], {
    [CheckboxStyles['c-chk__message--success']]: props.validation === VALIDATION.SUCCESS,
    [CheckboxStyles['c-chk__message--warning']]: props.validation === VALIDATION.WARNING,
    [CheckboxStyles['c-chk__message--error']]: props.validation === VALIDATION.ERROR,

    // RTL
    [CheckboxStyles['is-rtl']]: isRtl(props)
  })
}))`
  ${props => retrieveTheme('forms.check_message', props)};

const Notification = styled.div.attrs(props => ({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION,
  className: classNames(CalloutStyles['c-callout'], CalloutStyles['c-callout--dialog'], {
    // RTL
    [CalloutStyles['is-rtl']]: isRtl(props),

    // Validation types
    [CalloutStyles['c-callout--success']]: props.type === VALIDATION.SUCCESS,
    [CalloutStyles['c-callout--warning']]: props.type === VALIDATION.WARNING,
    [CalloutStyles['c-callout--error']]: props.type === VALIDATION.ERROR,
    [CalloutStyles['c-callout--info']]: props.type === VALIDATION.INFO
  })
}))`
  ${props => retrieveTheme(COMPONENT_ID, props)};

const Hint = styled.div.attrs(props => ({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION,
  className: classNames(CheckboxStyles['c-chk__hint'], {
    // RTL
    [CheckboxStyles['is-rtl']]: isRtl(props)
  })
}))`
  ${props => retrieveTheme(COMPONENT_ID, props)};

const StyledTextarea = styled(StyledTextInput.withComponent('textarea')).attrs(props => ({
  className: classNames(props.className, TextStyles['c-txt__input--area'], {
    [TextStyles['is-resizable']]: props.resizable,

    // RTL
    [TextStyles['is-rtl']]: isRtl(props)
  })
}))`
  ${props => retrieveTheme('forms.text_area', props)};

const Message = styled.div.attrs(props => ({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION,
  className: classNames(
    CheckboxStyles['c-chk__message'],
    CheckboxStyles['c-chk__message--toggle'],
    {
      [CheckboxStyles['c-chk__message--success']]: props.validation === VALIDATION.SUCCESS,
      [CheckboxStyles['c-chk__message--warning']]: props.validation === VALIDATION.WARNING,
      [CheckboxStyles['c-chk__message--error']]: props.validation === VALIDATION.ERROR,

      // RTL
      [CheckboxStyles['is-rtl']]: isRtl(props)
    }
  )
}))`
  ${props => retrieveTheme(COMPONENT_ID, props)};

const ButtonGroup = ({ id, selectedKey, onStateChange, children, ...otherProps }) => {
  const [controlledSelectedItem, setControlledSelectedItem] = useState(selectedKey);

  const { selectedItem, focusedItem, getButtonProps, getGroupProps } = useButtonGroup({
    id,
    rtl: isRtl(otherProps),
    defaultSelectedIndex: 0,
    selectedItem: selectedKey === undefined ? controlledSelectedItem : selectedKey,
    onSelect: newSelectedItem => {
      if (onStateChange) {
        onStateChange({ selectedKey: newSelectedItem });
      } else {
        setControlledSelectedItem(newSelectedItem);
      }
    }
  });

  const buttons = Children.map(children, child => {
    if (!isValidElement(child)) {
      return child;
    }

  direction: ${props => (isRtl(props) ? 'rtl' : 'ltr')};

onKeyDown: (e: KeyboardEvent) => {
                  if (!inputValue) {
                    if (isRtl(props) && e.keyCode === KEY_CODES.RIGHT && selectedItems.length > 0) {
                      setFocusedItem(selectedItems[selectedItems.length - 1]);
                    } else if (
                      !isRtl(props) &&
                      e.keyCode === KEY_CODES.LEFT &&
                      selectedItems.length > 0
                    ) {
                      setFocusedItem(selectedItems[selectedItems.length - 1]);
                    } else if (e.keyCode === KEY_CODES.BACKSPACE && selectedItems.length > 0) {
                      (setDownshiftState as any)({
                        type: REMOVE_ITEM_STATE_TYPE,
                        selectedItem: selectedItems[selectedItems.length - 1]
                      });
                      (e as any).nativeEvent.preventDownshiftDefault = true;
                      e.preventDefault();
                      e.stopPropagation();
                    }
                  }
                },
                isVisible: isFocused || inputValue || selectedItems.length === 0,