I want to test my below Select and simulate on change event. but currently the onchange is not working. On selecting certain option from the dropwdown, I wan to show a Input field but I am unable to simulate onchange event. Everything is working fine in the JSX file. but not getting simulated properly in the Test File.

    const accType = watch('accountType');
        <Controller
                control={control}
                name="accountType"
                label="Account Type"
                rules={{ required: true }}
                render={({ onChange, ref }) => (
                  <Select
                    onChange={(e) => onChange(e.target.value)}
                    className={styles.w100}
                    defaultValue={bankAccountTypes[0]}
                  >
                    {bankAccountTypes.map((type) => (
                      <MenuItem key={type} value={type}>
                        {type}
                      </MenuItem>
                    ))}
                  </Select>
                )}
              />

{
          accType === 'NRO Savings Account' ? (
            <Grid item={true} xs={12} className={`${styles.fieldItem}`}>
              <TextField
                InputLabelProps={{ shrink: true }}
                className={styles.w100}
                type="text"
                name="country"
                required={true}
                label="Country"
                inputRef={register({ required: true })}
              />
            </Grid>
          ) : null
        }

Below is my Test file

// Country Field should be hidden
let country = component.find({ name: 'country' });
expect(country).toHaveLength(0);

// Simulate Account type field to display Country Dropdown
await act(async () => {
  accountType.simulate('change', { value: 'NRO Savings Account' });
});

// Country field should be present now
country = component.find({ name: 'country' });
expect(country).toHaveLength(1);

//Expected length: 1
//Received length: 0

I am using Jest and Enzyme here in React