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

/** Applies inset `box-shadow` styling on focus */
  focusInset: PropTypes.bool,
  hovered: PropTypes.bool,
  /** Displays select open state */
  open: PropTypes.bool,
  renderItem: PropTypes.func.isRequired,
  maxItems: PropTypes.number,
  validation: PropTypes.oneOf([VALIDATION.SUCCESS, VALIDATION.WARNING, VALIDATION.ERROR])
};

Multiselect.defaultProps = {
  maxItems: 4
};

/* @component */
export default withTheme(Multiselect) as React.FunctionComponent;

);
});

Anchor.propTypes = {
  /** Apply danger styling */
  danger: PropTypes.bool,
  focused: PropTypes.bool,
  hovered: PropTypes.bool,
  active: PropTypes.bool,
  /* Used when the anchor navigates to an external resource */
  external: PropTypes.bool,
  children: PropTypes.node
};

/** @component */
export default withTheme(Anchor);

small: PropTypes.bool,
  hidden: PropTypes.bool,
  arrow: PropTypes.bool,
  maxHeight: PropTypes.string
};

Menu.defaultProps = {
  placement: 'bottom-start',
  animate: true,
  eventsEnabled: true,
  maxHeight: '400px',
  zIndex: 1000
};

/** @component */
export default withTheme(Menu) as React.FunctionComponent;

if (appendToNode) {
                  return createPortal(menu, appendToNode);
                }

                return menu;
              }}
            
          )}
        
      
    );
  }
}

export default withTheme(MenuContainer);

popperModifiers: PropTypes.any,
  animate: PropTypes.bool,
  eventsEnabled: PropTypes.bool,
  zIndex: PropTypes.number
};

Datepicker.defaultProps = {
  placement: 'bottom-start',
  refKey: 'ref',
  animate: true,
  eventsEnabled: true,
  zIndex: 1000,
  locale: 'en-US'
};

export default withTheme(Datepicker) as FunctionComponent;

this.addDragEvents();

                e.preventDefault();
                e.stopPropagation();

                this.maxThumbRef.focus();
              }}
            />
          
        
      
    );
  }
}

export default withTheme(MultiThumbRange);

});
  };

  return (
    
      {renderButtons()}
    
  );
};

ButtonGroup.propTypes = {
  selectedItem: PropTypes.any,
  onSelect: PropTypes.func
};

export default withTheme(ButtonGroup);

);
};

Dropdown.propTypes = {
  isOpen: PropTypes.bool,
  selectedItem: PropTypes.any,
  selectedItems: PropTypes.arrayOf(PropTypes.any),
  highlightedIndex: PropTypes.number,
  inputValue: PropTypes.string,
  onSelect: PropTypes.func,
  onStateChange: PropTypes.func,
  downshiftProps: PropTypes.object
};

export default withTheme(Dropdown) as React.FunctionComponent;

containerRef = reference => {
    this.container = reference;
  };

  render() {
    const { children, render = children } = this.props;

    return render({
      getContainerProps: this.getContainerProps,
      containerRef: this.containerRef
    });
  }
}

export default withTheme(FocusJailContainer);

minValue: PropTypes.number,
  maxValue: PropTypes.number,
  step: PropTypes.number,
  onChange: PropTypes.func
};

MultiThumbRange.defaultProps = {
  min: 0,
  max: 100,
  minValue: 0,
  maxValue: 100,
  step: 1
};

/** @component */
export default withTheme(MultiThumbRange);