Cannot get dynamic dropdown element for Angular web application to be recognized in Cypress

[rnunezil]

I have a web application written in Angular I am trying to test in Cypress. I am having trouble making the dropdown menu show up(circled in attached image on left). The dropdown menu shows up when clicking on the 3 dots. When clicking on the dots, I notice the class attribute in the 'fui-datagrid-action-menu' changes to the class attribute show encircled. Thus in Cypress, I tried to set the class attribute value to that value encircled. But when running my test, I get a 'Expected to find element: fui-dropdown, but never found it.'. Below is a snippet of my Cypress code. Can anybody suggest what I am doing wrong or is there a better way of coding for a page like this where the Angular elements are dynamic(ie, class attributes change, etc). Thanks.

cy.get('fui-widget-body')
                    .within(() => {
                  cy.log('user found');
                  cy.get('fui-datagrid-action-menu').invoke('show').trigger('mouseover', {force: true});
                  cy.get('fui-datagrid-action-menu').invoke('show').click({ force: true });
                  cy.get('fui-datagrid-action-menu').invoke('attr', 'class', 'fui-datagrid-body-row-action-menu ' +
                    'ng-star-inserted fui-datagrid-action-menu-visible fui-datagrid-action-menu-open')
                    .within(($menu) => {
                      cy.get('fui-dropdown').invoke('show').click({ force: true });