Expected behavior The btn group rounded is expected to appear as below

Actual behavior

However it is appearing as seen below where the middle button is appearing as a separate button and not part of the group

Resources (screenshots, code snippets etc.) This is the code Iam using

<div *ngIf="showEdit && question.showAcceptQ">
    <div class="btn-group" role="group" aria-label="Basic example">
      <button
        mdbBtn
        type="button"
        color="deep-purple"
        rounded="true"
        outline="true"
        class="waves-light"
        mdbWavesEffect
      >
        <mdb-icon fas icon="anchor" class="mr-1"></mdb-icon>Left
      </button>
      <button
        mdbBtn
        type="button"
        color="deep-purple"
        rounded="true"
        outline="true"
        class="waves-light"
        mdbWavesEffect
      >
        <mdb-icon far icon="sun" class="mr-1"></mdb-icon>Middle
      </button>
      <button
        mdbBtn
        type="button"
        color="deep-purple"
        rounded="true"
        outline="true"
        class="waves-light"
        mdbWavesEffect
      >
        <mdb-icon fas icon="user" class="mr-1"></mdb-icon>Right
      </button>
    </div>
  </div>

Please help me understand what I need to do to fix the same