How to rotate Material-Ui select custom icon, it does not transform and is not clickable-CodePudding

I am trying to implement my own icon for material ui select component. So far i have managed to change default icon with use of "IconComponent" MU select attribute.

But the newIcon is not rotating while menu list is opened, as in case of default icon, and moreover, menu with values wont open upon clicking it. ListIteam appear only if I click the select component itself, but not the new icon.

I have tested two different icons (anotherIcon and newIcon) and the problem remains.

const newIcon = (
  <svg
    width="38"
    height="38"
    viewBox="0 0 38 38"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect x="0.5" y="0.5" width="37" height="37" rx="9.5" stroke="#222426" />

    <svg
      width="18"
      height="12"
      x="10"
      y="13"
      viewBox="0 0 18 12"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M0.66732 0.999999L8.72964 10.8681C8.76363 10.9095 8.80536 10.9428 8.85208 10.9655C8.89879 10.9882 8.94943 11 9.00065 11C9.05187 11 9.10251 10.9882 9.14922 10.9655C9.19594 10.9428 9.23767 10.9095 9.27167 10.8681L17.334 1"
        stroke="#222426"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </svg>
);

      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
          IconComponent={() => <div className="test">{newIcon}</div>}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>

I have also tried to manually overdrive select iconOpen class in order to get icon transform and rotate by 180deg, (as in this case