mdb-select label not attached properly

I am having trouble getting the label attached to the mdb-select component to properly attach to the component as seen in the documentation examples. I have literally copy-pasted the code form the examples into my code, and I get a different result.

https://imgur.com/2yzLvHo

https://imgur.com/LvsTzkq

test.component.html

<div class="container">

  <div class="row mt-3">

    <div class="col-md-6">

      <div class="md-form">
        <input mdbActive type="text" id="firstName" class="form-control">
        <label for="firstName" class="">First Name</label>
      </div>


        <mdb-select  [options]="optionsSelect" placeholder="Marital Status"></mdb-select>
        <label>Marital Status</label>

    </div>

  </div>

</div>

test.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

  optionsSelect: Array<any>;

  constructor() { }

  ngOnInit() {
    this.optionsSelect = [
      { value: 'married', label: 'Married' },
      { value: 'singled', label: 'Single' },
      { value: 'divorced', label: 'Divorced' },
    ];
  }

}

I suspect this might be a problem due to the enormous difficulties associated with installing MDB Angular Pro into an Angular CLI project, since adequate documentation has yet to be provided. It stretches credulity to think that a product would be brought to full release without installation instructions! I have to cull through threads on this forum to figure it out, and they are littered with errors! So far, I am regretting my purchase of this product.