Link example Social Section MDB Legacy: https://v4-angular-15.legacydocs.mdbootstrap.com/docs/b4/angular/sections/social/

Not Work in MDB5

Structure of my app: app.module -> core.module (here declaration MdbCollapse) -> main.component

main.component.html:

<!-- CARD FEEDS -->
<div class="col-md-6 mt-1 static">

  <div class="card mb-3 no-border-card" *ngFor="let feed of feeds">
    <div class="card-header no-border-card bg-warning">
      <div class="row">
        <div class="col-md-8">
          <img src="../../assets/imgs/mylogo.png" class="rounded-circle shadow-2-strong" height="32" loading="lazy">
          <a class="danger-text sombra-dark"> Fla</a><a class="black-text sombra-dark">Social</a>          
        </div>
        <div class="col-md-4 text-end mt-1">
          <i class="far fa-clock black-text"></i> {{ feed.date }} 
        </div>
      </div>
    </div>          
    <img src="{{ feed.image }}" class="img-fluid" alt="{{ feed.image }}"/>
    <div class="card-footer no-border-card text-muted bg-menu text-center">
      <ul class="list-unstyled list-inline font-small mt-3">
        <li class="list-inline-item pr-3">
          <a role="button" class="text-white comment" data-toggle="collapse" 
            (click)="'{{feed.id}}.toggle()'" [attr.aria-expanded]="'!{{feed.id}}.collapsed'" 
            aria-controls="{{feed.id}}">
            <i class="fas fa-comment pr-2 text-grey comenta" mdbTooltip="Comentários" placement="top"></i> 4</a>
        </li>            
        <li class="list-inline-item pr-3">
          <a class="text-white">
            <i class="fas fa-heart pr-2 danger-text like"
              mdbTooltip="Curtidas" placement="top"></i> 21</a>
        </li>
        <li class="list-inline-item pr-3">
          <a class="text-white">
            <i class="fas fa-heart-crack pr-2 brown-text dislike"
              mdbTooltip="Não Curtidas" placement="top"></i> 2</a>
        </li>
        <li class="list-inline-item pr-2">
          <a class="text-white">
            <i class="fas fa-eye pr-2 teal-text cor-ver" 
              mdbTooltip="Lidas" placement="top"></i> 100</a>
        </li>
        <li class="list-inline-item">
          <a class="text-white">
            <i class="fas fa-share-alt pr-2 orange-text share"
              mdbTooltip="Compartilhamentos" placement="top"></i> 18</a>
        </li>
      </ul>
    </div>
    <div class="card-footer">
      <p class="font-large grey-dark-text mb-0">{{ feed.title }}</p>
      <hr>
      <p class="font-small-bold grey-dark-text mb-0">
        <strong>Fonte/Créditos:</strong> {{ feed.creditos }}</p>
    </div>
    <div class="collapse" id="{{feed.id}}"> 
      <div id="{{feed.id}}" mdbCollapse #{{feed.id}}="mdbCollapse">
        <div class="card-body mt-1">
          <div class="md-form mt-1 mb-1">
            <textarea type="text" id="form7" class="form-control md-textarea" rows="3"></textarea>
            <label for="form7">Add comment</label>
          </div>
          <div class="d-flex justify-content-end">
            <button type="button" mdbBtn flat="true" class="waves-effect" data-toggle="collapse"
              data-target="#{{feed.id}}" [attr.aria-expanded]="'!{{feed.id}}.collapsed'" aria-controls="{{feed.id}}">Cancel</button>
            <button type="button" mdbBtn color="primary" data-toggle="collapse" data-target="#{{feed.id}}"
              [attr.aria-expanded]="'!{{feed.id}}.collapsed'" aria-controls="{{feed.id}}">Reply</button>
          </div>        
        </div>
      </div>  
    </div>
  </div>
</div>

I'm migrating my App to mdb5 and I noticed that several components no longer exist, such as sections.