Angular Material Select styling not behaving correctly

I am following this example of using a material select field: https://material.angular.io/components/select/overview

I have this list in my ts file:

  accessTypes: string[] = [
    'New Employee', 'Rehire', 'New Provider', 'New Resident/Fellow', 'Transfer/Job Title Change',
    'New Contractor/Vendor', 'New Student/Intern', 'Change to existing user'
  ];

I'm able to make a simple drop down list and get the value quite easily:

<select class="md-col-6 numberEight" [(ngModel)]="model.accessType">
  <option *ngFor="let item of accessTypes" [value]="item">{{item}}</option>
</select>

But when I try to use the mat-select the css from the example is not applied and the list options appear all the way at the bottom of the screen:

    <div class="question">
      <div class="row">
        <h5>8. Type of Access Request</h5><p class="required">*</p>
      </div>

      <div class="col-md-6">
        <mat-form-field appearance="fill">
          <mat-label>Access Types</mat-label>
          <mat-select [(ngModel)]="model.accessType">
            <mat-option *ngFor="let item of accessTypes" [value]="item">
              {{item}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      
    </div>

This is what it looks like:

And then all the way at the bottom of the page the list options appear:

There is no styling at all in my css file that affects anything in the select field. Class question has no styling and required just makes the * red.

Even when I do this in a completely new component with an html file including only:

<mat-form-field appearance="fill">
  <mat-label>Access Types</mat-label>
  <mat-select [(ngModel)]="this.accessTypes" placeholder="Choose...">
    <mat-option *ngFor="let item of accessTypes" [value]="item">
      {{item}}
    </mat-option>
  </mat-select>
</mat-form-field>

It behaves the same.

So why is this happening? Why does the list not appear as it does in the example ?Does the example exclude some styling that is necessary?

I found this similar question: Mat Select appears in the bottom of the page and tried adding @import "~@angular/material/prebuilt-themes/indigo-pink.css"; to the pages css file but this did not fix the problem.

I have

import {MatSelectModule} from '@angular/material/select';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

I also am including in package.json:

"@ng-bootstrap/ng-bootstrap": "^9.1.0",
"bootstrap": "^4.5.0",

and in angular.json I include in styles:

 "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.css"
            ],

and in scripts:

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.js"
            ]

In my app module. Do I need anything else/are these wrong? Is the bootstrap I already have somehow affecting the style of the select list?

I can't share the entire html page because it makes the question too long, but if you need anything else please let me know.