Как в Mui Select сделать свою стрелку?

Я пытаюсь сделать кастомную стрелку для Mui Select. Для этого я использую проп IconComponent, но у меня получилось только передать в него изображение. Как сделать, чтобы оно менялось при клике? Например, кликнул на селекте, и стрелка была arrowDown, а стала arrowUp?

import React, { useMemo, useState } from 'react';
import Select, {SelectChangeEvent} from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import arrowDown from '../../../assets/UI/chevron_down.svg';
import arrowUp from '../../../assets/UI/chevron_up.svg';

const options = [
  {id: '1', value: 'One'},
  {id: '2', value: 'Two'},
  {id: '3', value: 'Three'},
  {id: '4', value: 'Four'},
]

interface IStylesOptions {
  height: string;
  minWidth?: string;
}

const styles = (options: IStylesOptions) => ({
  width: '100%',
  border: '1px solid #D9D9D9',
  borderRadius: '16px',
  fontFamily: 'Montserrat',
  fontStyle: 'normal',
  fontWeight: 700,
  fontSize: '14px',
  color: '#5E5E5E',
  minWidth: options.minWidth ? options.minWidth : 'unset',
  
  height: options.height,
})

const SelectIcon = () => {
  return (
      <img 
        src={arrowDown} 
        alt=''
        style={{
          position: 'absolute',
          right: '9px',
          width: '12px'
        }}
      />
  );
}

interface IProps {
  height?: string;
  minWidth?: string;
}

const MuiSelect: React.FC<IProps> = ({height = '32px', minWidth}) => {
  const [value, setValue] = useState<string>('One');

  const handleChange = (e: SelectChangeEvent) => {
    setValue(e.target.value);
  }

  const getStyles = useMemo(() => {
    return styles({height, minWidth});
  }, [height, minWidth])

  return (
      <Select
        value={value}
        onChange={handleChange}
        sx={getStyles}
        IconComponent={() => <SelectIcon/>}
      >
        {
          options.map(item => 
            <MenuItem 
              key={item.id} 
              value={item.value}
            >
              {item.value}
            </MenuItem>)
        }
      </Select>

  );
}

export default MuiSelect;