Q:

React bootstrap duplicated modal components

For some reason the modal is rendered more than one time, sometimes 2 or 3. Then, after a few seconds the aditionals modals are removed automatically.
The modal is opened by a route so I'm doing somethig like this:
const ModalWrapper = (props) => {
  return (
    <Modal
      show={props.showModal}
      onHide={props.hide}
    >
    ...
    </Modal>
  );
};

class ComponentPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      showModal: true,
    };
  }

  @autobind
  closeModal() {
    this.props.history.goBack();
    this.setState({showModal: false});
  }

  render() {
    return (
      <ModalWrapper
        {...this.state}
        hide={this.closeModal}
      />
    );
  }
}

A:

Usually this happens when the Modal is inside a wrapper, for example:
const ChildrenWrapper = ({children}) => {
  return <div>{children}</div>
}

And the modal is a child in the wrapper:
const ModalWrapped= ({}) => {
return <ChildrenWrapper>
            <Modal show={true}>some content</Modal>
       </ChildrenWrapper>
}

Than the App :
const App = () => {
   return <ModalWrapped/>
}

The result is that the instance of the Modal is rendered 2 times in the virtual dom.

