userEvent.selectOptions actually selects the value i set but its not firing the event listener that updates a hook

this is the component

onChangeSelectHandler = (e: React.ChangeEvent<HTMLSelectElement>): void => {
  setSinger({
    ...singer,
    voiceType: VoiceType[Number(e.currentTarget.value)],
  });
},
VoiceTypeList = () => (
  <select
    ref={selectRef}
    onChange={onChangeSelectHandler}
    value={VoiceType[singer.voiceType as keyof typeof VoiceType]}
  >
    {Object.keys(VoiceType).map((element, id) => {
      if (isNaN(Number(element))) {
        return (
          <option
            key={id}
            value={VoiceType[element as keyof typeof VoiceType]}
          >
            {element}
          </option>
        );
      }
    })}
  </select>
);

Here the test

test("Add singer to the list when form is filled", async () => {
const { result } = renderHook(
    () => useSelector((state: RootState) => state.crud),
    {
      wrapper: ({ children }) => (
        <Provider store={store}>{children}</Provider>
      ),
    }
  ),
  singerNameInput = screen.getByPlaceholderText("Singer name"),
  singerBandInput = screen.getByPlaceholderText("Singer band"),
  singerVoiceTypeSelect = screen.getByRole("combobox") as HTMLOptionElement,
  addSingerBtn = screen.getByText("Add");

await userEvent.type(singerNameInput, "Hansel");
await userEvent.type(singerBandInput, "Hansel");
await userEvent.selectOptions(singerVoiceTypeSelect, "2");

fireEvent(
  addSingerBtn,
  new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
  })
);
expect(singerVoiceTypeSelect.querySelectorAll("option")[2].selected).toBe(
  true
);
expect(result.current[0].name).toBe("Hansel");
expect(result.current[0].band).toBe("Hansel");
expect("Baritone").toBe(VoiceType[2]);
expect(result.current[0].voiceType).toBe(VoiceType[2]);});

The console show me this

As you can see the test doesnt fails when I assure that element with value of “2” is selected. Its actually select but the hook doesnt update when I submit.