Cypress - Access Dropdown Options - Detached from DOM

Have already reviewed this post (and a few others but this is the most similar), read through Cypress docs about this error message here. I know it's some kind of race error, but can't for the life of me get it right!

I have a drawer containing a dropdown menu. I want to click the first dropdown menu, and select the first option.

Here's a simplified version of my test:

it('Adds new involved party to a case', () => {
  // click button to open drawer that contains dropdown
  cy.contains(' Beteiligter').should('exist').click();

  // check that title inside drawer exists to be sure it's open
  // then get the first form item (dropdown) and click it
  cy.contains('Beteiligter erstellen')
    .should('exist')
    .get('.ant-form-item')
    .eq(0)
    .click();

  // click submit button to create involvedParty
  cy.contains('Erstellen').click();

  // check that new party has been added to UI
  cy.get('.ant-collapse-header')
    .contains('Cypress Test Company')
    .should('have.length', 1);
  )
}

If I add a check in Cypress it shows my '.ant-form-item' at index 0 IS visible and DOES exist on the DOM, but I get this error in Cypress:

Timed out retrying: cy.click() failed because this element is detached from the DOM.

<div class="ant-row ant-form-item">...</div>

Cypress requires elements be attached in the DOM to interact with them.

The previous command that ran was:

  > cy.eq()

This DOM element likely became detached somewhere between the previous and current command.

Common situations why this happens:
  - Your JS framework re-rendered asynchronously
  - Your app code reacted to an event firing and removed the element

You typically need to re-query for the element or add 'guards' which delay Cypress from running new commands.

This is the HTML for my dropdown:

<div class="ant-row ant-form-item">
  <div class="ant-col ant-form-item-control">
    <div class="ant-form-item-control-input">
      <div class="ant-form-item-control-input-content">
        <div class="ant-select ant-select-single ant-select-show-arrow">
          <div class="ant-select-selector"><span class="ant-select-selection-search"><input id="control-ref_role" autocomplete="off" type="search" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="control-ref_role_list" aria-autocomplete="list" aria-controls="control-ref_role_list" aria-activedescendant="control-ref_role_list_7" readonly="" unselectable="on" value="" style="opacity: 0;" aria-expanded="false"></span>
            <span
              class="ant-select-selection-placeholder"></span>
          </div><span class="ant-select-arrow" unselectable="on" aria-hidden="true" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
        </div>
      </div>
    </div>
  </div>
</div>