The code below illustrates a normal drop down list. To indicate a drop down list, I use a down arrow with
arrow_drop_down

This arrow remains static for me in any state of the list (open or closed). However, I would like that when clicking on the list, the arrow changes to
arrow_drop_up
.

Those. so that with two different states of the list, there would be two different arrows.

    export default function FilterStatusCode() {
  const [values, setValues] = React.useState([]);

  const [isExpanded, setIsExpanded] = useState(false);

  const toggleExpand = () => {
      setIsExpanded(!isExpanded);
  };

  return <>
    <div className="item-toggle-statuscode" onClick={toggleExpand}>
        <h6>Status Code</h6>
          <span class="material-icons">
            arrow_drop_down
          </span>
    </div>
    { isExpanded &&
      <div>
        <TagInput
          inputProps={{ placeholder: 'Add status code...' }}
          values={values}
          onChange={(values) => {
          setValues(values)}}>
        </TagInput>
      </div>
    }
</>;
}