testing select on change with react test utils

I have the following component:

import React from 'react';
import { useHistory } from 'react-router-dom';
import Logo from '../../Commons/Components/Logo';

const ComponentList = () => {
  let history = useHistory();

  const handleSelectChange = e => {
    history.push(`/component-list/${e.target.value}`);
  };

  return (
    <div className="container">
      <div className="row">
        <div className="col-md">
          <section className="app">
            <Logo />
          </section>
        </div>
      </div>
      <div className="row">
        <div className="col-md"></div>
        <div className="col-md">
          <section className="app">
            <select
              id="components-select"
              name="select"
              onBlur={handleSelectChange}
              onChange={handleSelectChange}
            >
              <option value="">-- Componentes --</option>
              <option value="ui-textarea">ui-textarea</option>
              <option value="ui-collapse">ui-collapse</option>
              <option value="ui-checkbox">ui-checkbox</option>
              <option value="ui-input">ui-input</option>
              <option value="ui-select">ui-select</option>
              <option value="ui-button">ui-button</option>
              <option value="ui-input-date-picker">ui-input-date-picker</option>
              <option value="ui-input-iban">ui-input-iban</option>
              <option value="ui-tooltip">ui-tooltip</option>
              <option value="ui-carousel">ui-carousel</option>
              <option value="ui-document-viewer">ui-document-viewer</option>
              <option value="ui-loader">ui-loader</option>
              <option value="ui-card">ui-card</option>
              <option value="ui-charts">ui-charts</option>
              <option value="ui-data-grid">ui-data-grid</option>
              <option value="ui-list">ui-list</option>
              <option value="ui-modal">ui-modal</option>
              <option value="ui-pagination">ui-pagination</option>
              <option value="ui-wizard">ui-wizard</option>
              <option value="ui-icon">ui-icon</option>
            </select>
          </section>
        </div>
        <div className="col-md"></div>
      </div>
    </div>
  );
};

export default ComponentList;

And I am trying to test this way:

it('should call history.push on change component list selected value', async () => {
    const history = createMemoryHistory();
    history.push = jest.fn();

    act(() => {
      render(
        <MemoryRouter>
          <ComponentList />
        </MemoryRouter>,
        container
      );
    });

    const element = document.getElementById('components-select');

    act(async () => {
      await Simulate.select(element, { target: { value: 'ui-textarea' } });
    });


    expect(element.value).toBe('ui-textarea');
    expect(element.options[1].selected).toBeTruthy();
    expect(history.push).toHaveBeenCalled();
  });

but can't make it work, I also tried:

act(async () => {
      await Simulate.change(element, { target: { value: 'ui-textarea' } });
    });