How to get values in array of array in angular?

I am getting the table column name as a status and I need to change the color of the buttons based on status value.

<ng-container matColumnDef="agentName">
    <th mat-header-cell *matHeaderCellDef>Agent Name</th>
    <td mat-cell *matCellDef="let element">{{element.agent_id.company_name}}</td>
</ng-container>

<ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef>Status</th>
    <td mat-cell *matCellDef="let element"><span class="dot" [ngStyle]="{'background-color': getRowColor()}"></span></td>
</ng-container>

component.ts

// ...

export class Component {
    red = { 'background-color': 'red' }
    yellow = { 'background-color': '#DAA520' }
    green = { 'background-color': '#00FF00' }
    pageSizeOptions: number[];
    displayedColumns: string[] = ['title', 'agentName', 'status', 'star'];
    dat: any[] = [{
        id: 1,
        title: 'Test',
    }];
    state : any = [];
    getPos: any = [];

    dataSource: MatTableDataSource<{}>;
    @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

    constructor(
        private store: Store<IAppState>,
        private userService: UserService,
        private poService: PoService,
        private propertiesService: PropertiesService,
        private _location: Location,
    ) {}

    ngOnInit() {
        this.getAllPO()
        this.pageSizeOptions = this.propertiesService.getPaginationSize()
    }

    edit(data) {
        this.poService.changeEditPurchaseOrder(data)
    }

    getAllPO() {
        const payload = {
            'company_id': this.userService.getUserdetails().CompanyUser.company_id.id,
        }

        this.showSpinner = true
        this.poSuccessSubscription.unsubscribe()
        this.poErrorSubscription.unsubscribe()
        this.store.dispatch(new GetAllPOs(payload))

        this.poSuccessSubscription = this.store
            .pipe(select(getAllPOsSuccess))
            .subscribe((result: any) => {
                if (!!result) {
                    this.getPos = result
                    this.state = this.getPos.find(element => {
                        return element.POMaterials.find(item =>{
                            return item.state
                        })
                    })
                    this.dataSource = new MatTableDataSource(result)
                    this.dataSource.paginator = this.paginator;
                    this.showSpinner = false
                } else {
                    this.dataSource = new MatTableDataSource([])
                    this.dataSource.paginator = this.paginator;
                    this.showSpinner = false
                }
            })

        this.poErrorSubscription = this.store
            .pipe(select(getAllPOsError))
            .subscribe((result: any) => {
                if (!!result) {
                    // alert(result.error)
                    this.showSpinner = false
                }
            })
    }

    getRowColor(state) {
        if (state === 'Not Received') {
            return 'red'
        } else if (state === 'Completed') {
            return '#00FF00'
        }
        else {
            return '#DAA520'
        }
    }

    applyFilter(filterValue: string) {
        this.dataSource.filter = filterValue.trim().toLowerCase();
        if (this.dataSource.paginator) {
            this.dataSource.paginator.firstPage();
        }
    }
}

My data looks like this. I need to get the value of state in each array and assign it to each row. Based on state value, I need to change the color of the buttons.

const result = [{
    Pomaterials: [{
        id: 1,
        state: 'not received'
    }],
    po_id: 1,
    mat_id: 3
}, {
    Pomaterials: [{
        id: 1,
        state: 'not received'
    }],
    po_id: 1,
    mat_id: 2
}];