Nightmare.JS Testing With React.JS + MaterialUI

Question

I am testing a React application with Nightmare.JS. While testing, I am unable to complete a "click" on the Material UI component Select Field. As a result, I am unable to choose an option from the Menu Items component.

Please advise if there are any workarounds for this issue.

Thanks.

Here is my block of code. #product_type_code is the button the clicks on the Select Field. When the click is executed the Select Field does not open up to show the Menu Item options.

describe ('Create a new product', function () {
 describe ('given correct data', () => {
  it ('should pass', done => {
    nightmare
      .goto ('http://localhost:8080')
      .wait (2000)
      .on ('page', (type, message) => {
        if (type == 'alert') done ();
      })
      .wait (2000)
      // the user successfully logs in
      .type ('#login_username', '[email protected]')
      .type ('#login_password', 'password')
      .click ('#login_submit')
      .wait (2000)
      // the user clicks on the navigation
      .wait ('#appbar > div:nth-child(1) > button')
      .click ('#appbar > div:nth-child(1) > button')
      .wait (2000)
      // the user clicks on the product link and is redirected to the product page
      .click ('#product_link')
      .wait (2000)
      // the user clicks the search button
      .click ('#product_filters_submit')
      .wait (2000)
      // the user clicks the "new" button to create a new product
      .click ('#product_new')
      .wait (2000)
      // the user creates a new product
      .type ('#product_description', 'AABB')
      .type('#product_code', 'AABB')
      .wait(2000)
      .mousedown('#product_type_code > div:nth-child(1) > button > div > svg > path')
      .click('#product_type_code > div:nth-child(1) > button > div > svg > path')
      .wait(2000)
      .click('#product_currency_mnemonic')
      .select('#product_currency_mnemonic', 'USD')
      .wait(2000)
      .click ('#product_currency_mnemonic > div:nth-child(1) > button')
      .click ('#product_currency_mnemonic')
      .type ('#product_comment', 'AABB')
      .type ('input[id^="undefined-undefined-Company"]', 'AABB')
      .wait (10000)
      .click('#product_submit')
      // here the input field is cleared and then a new amount is added in
      .evaluate (function () {
        document.querySelector (
          'input[id^="undefined-undefined-BudgetAmount"]'
        ).value =
          '';
      })
      .evaluate (() => document.querySelector ('h1').innerText)
      .then (function (result) {
        expect (result).to.equal ('Products');
        expect (result).to.not.equal ('Navigation');
        done ();
      })
      .catch (done);
  });
});

});