I am trying to wirte integration test for a react component using Cypress. I can login and open dialog which is a form. However i am unable to select an option, as seen below. Overall i have run this test several times, and only two or three times it was passed, but 99% of the times it failed.

This is the dialog:

         <Grid item xs={12}>
              <FormikFormControlSelect
                formik={formik}
                label="Insurers"
                id="insurers"
                variant="outlined"
                fullWidth
                multiple
                disabled={promiseInProgress}
              >
                {memberships.insurers?.map((membership, index) => (
                  <MenuItem
                    key={index}
                    value={formatCordaX500Name(membership.identity)}
                  >
                    {formatCordaX500Name(membership.identity)}
                  </MenuItem>
                ))}
             </FormikFormControlSelect>
        </Grid>

and this is my test code:

describe('MachineDialog', () => {
  it('should add a new machine successfully', () => {
    // Login
    cy.visit('https://xx.xx.test.xxxxxx.com/machines');
    cy.get('input#username').type('xxx');
    cy.get('input#password').type('xxxxxxxx');
    cy.get('input#kc-login').click();

    // Go to machines page and open New Machine btn
    cy.get('[data-cy="new-machine-btn"]').click({ force: true });

    cy.get('#insurers-select', { timeout: 1000 })
      .parent()
      .click({ force: true })
      .get('ul > li[data-value="RuV (Wiesbaden, DE)"]', { timeout: 5000 })
      .click({ force: true });

the error:

timed out retrying after 4000ms: expected to find element ul > li[data-value="RuV (Wiesbaden, DE)"], but never found it

Here is the result. Please note that the option in the picture is selected but in fact i was not, i just manually selected it.

enter image description here
enter image description here