Почему ошибка WrappedComponent lacks a handleClickOutside(event) function for processing outside click events

Есть компонент который рендерит компонент SocialAuth

              <SocialAuth
                            componentFb={fbAuthButton}
                            componentVk={VkAuthButton}
                            vkOptions={{}}
                            fbOptions={{}}

                        />

const VkAuthButton = ({ onClick, key }) => (
    <div className={s.vk} key={key}>
      <Button action="button"  clickHandler={onClick} round>
        <img src={vk} alt="vk" width={50} height={50} />
      </Button>
  </div>
  );
const fbAuthButton = ({ onClick, key }) => (
<Button
    action="button"
    clickHandler={onClick}
    round
>
    <img src={fb} alt="fb" width={50} height={50} />
</Button>
);

Внутри компонент SocialAuth рендерит приходящие к нему компоненты

     render() {
    const { componentVk: VkComponent, componentFb: FbComponent } = 
         this.props;
         return [
        <VkComponent
            key='vkAuth'
            onClick1={this.handleClickAuth}
            {...this.props.customProps}
        />,
        <FbComponent
            key='fbauth'
            onClick2={this.handleClickAuth}
            {...this.props.customProps}
        />
    ];

}

handleClickAuth = event => {
    const { onClick} = this.props;

    if (typeof onClick === 'function') {
        onClick(event);
        if (event.defaultPrevented) {
            return;
        }
    }

};

При событии onClick возникает ошибка

WrappedComponent lacks a handleClickOutside(event) function for 
processing outside click events.

Подскажите, как избежать? И может как-то упростить стркутуру? почему возникает такая ошибка?