Erro ao abrir modal react-bootstrap

Front-end
#1

Estou com um problema com a modal do react-bootstrap, quando clico no botão ao invés de abrir ela no centro está abrindo na lateral direita, alguém sabe como resolver?

Modal:

class AcaoModal extends Component {
  constructor(props) {
    super(props);

    this.state = {
      show: false,
      nome: '',
      horario: ''
    };
    this.removerMassagem = this.removerMassagem.bind(this)
    this.editarMassagem = this.editarMassagem.bind(this)
  }

  hideModal = () => {
    this.setState({
      show: false,
      nome: '',
      horario: ''
    });
  };

  openModal = (nome, horario) => {
    debugger
    this.setState({
      show: true,
      nome: nome,
      horario: horario
    });
  };

  editarMassagem(nome, horario) {
    console.log(`Teste editar: ${this.state.nome}, ${this.state.horario}`)
  }

  //Função responsável por remover o usuário das massagens
  removerMassagem(e, horario, nome) {
    console.log("Teste excluir")
  }

  render() {
    return (
      <div className="static-modal">
      <Modal
        {...this.props}
        show={this.state.show}
        onHide={this.hideModal}
        dialogClassName="custom-modal"
      >
        <Modal.Header closeButton>
          <Modal.Title >
            Escolha uma ação
          </Modal.Title>
        </Modal.Header>

        <Modal.Body>
          <div>
              <h3>Qual ação deseja fazer?</h3>
              <Button onClick={() => this.editarMassagem()}>Alterar massagem</Button>
              <Button>Excluir massagem</Button>
          </div>
        </Modal.Body>
      </Modal>
      </div>
    );
  }
}

export default AcaoModal;

Em outro componente chamo a modal:

showModal(nome, horario) {
    this.refs.acaoModal.openModal(nome, horario)
  }
return (      
      <div className='flexItem' >
        <div><AcaoModal ref="acaoModal" /></div>
        <pre>{info.dia}</pre>
        <div className='horarios'>
          {info.horarios.map(e =>
            <Agenda
              acao={e.nome === null ? () => this.adicionarMassagem(e.horario) : () => this.showModal(e.nome, e.horario)}
              massagem={this.checaHorario(e, e.horario)} >
              <p className="horario">{e.horario.getHours()}:{(e.horario.getMinutes() < 10 ? '0' : '') + e.horario.getMinutes()}</p>
              <p>{e.nome}</p>
            </Agenda>
          )}
        </div>
      </div>