Dynamic accordion style checkbox menu in angular

I want to create a select menu with dynamic accordion style checkbox options same as the picture below:

or like this:

My data looks like this:

 let allowedShifts = [{
    category: "Days",
    name: "D"
},
{
    category: "Evenings",
    name: "E"
},
{
    category: "Nights",
    name: "N"
},
{
    category: "Days",
    name: "d"
},
{
    category: "Nights",
    name: "n"
}];

I tried to implement the same using multiple select menu but was not able to pipe filter the data based on category. Here is my code for the reference:

HTML:

<select multiple class="form-control" name="shifts" id="exampleSelect2" [(ngModel)]="allowedShifts">
<optgroup label="Days">
    <option [value]="shiftIcon.name" *ngRepeat="let shiftIcon in allowedShifts | filter: {category: 'Days'}">
        
    </option>
</optgroup>
<optgroup label="Evenings">
    <option [value]="shiftIcon.name" *ngRepeat="let shiftIcon in allowedShifts | filter: {category: 'Evenings'}">
        
    </option>
</optgroup>
<optgroup label="Nights">
    <option [value]="shiftIcon.name" *ngRepeat="let shiftIcon in allowedShifts | filter: {category: 'Nights'}">
        
    </option>
</optgroup>