Criei meu próprio componente Popover react-bootstrap personalizado:

export default class MyPopover extends Component {
  // ...
  render() {
    return (
        <Popover {...this.props} >
           // ....
        </Popover>
    );
  }
}

O componente é renderizado da seguinte forma:

// ... my different class ...

  render() {

    const popoverExample = (
        <MyPopover id="my-first-popover" title="My Title">
          my text 
        </MyPopover >
    );

    return (
        <OverlayTrigger trigger="click" placement="top" overlay={popoverExample}>
          <Button>Click Me</Button>
        </OverlayTrigger>
    );
  }

Agora, quero adicionar adereços personalizados paraMyPopover componente como esse: meu texto E para usar os novos adereços para definir algumas coisas no popover, por exemplo -

    <Popover {...this.props} className={this.getClassName()}>
       {this.showTheRightText(this.props)}
    </Popover>

mas depois recebo este aviso no navegador:

Aviso: adereços desconhecidospopoverType na etiqueta. Remova esses adereços do elemento.

Agora, acho que posso remover o{...this.props} parte e insira todos os adereços originais, um por um, sem os adereços personalizados, mas dessa maneira perco o efeito "fade" e também é uma maneira feia de lidar com esse problema. Existe uma maneira mais fácil de fazer isso?