SonarQube “Do not define components during render” with MUI/TS but can’t send component as prop

I am getting the following error during sonarqube scan:

Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state. Instead, move this component definition out of the parent component “SectionTab” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true.

enter image description here

I understand that it says that I should send the component as a prop from the parent, but I don’t want to send the icon everytime that I want to use this component, is there another way to get this fixed?

import Select from "@mui/material/Select";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleDown } from "@fortawesome/pro-solid-svg-icons/faAngleDown";

const AngleIcon = ({ props }: { props: any }) => {
  return (
    <FontAwesomeIcon
      {...props}
      sx={{ marginRight: "10px" }}
      icon={faAngleDown}
      size="xs"
    />
  );
};

const SectionTab = () => {
  return (
    <Select
      id="course_type"
      readOnly={true}
      IconComponent={(props) => <AngleIcon props={props} />}
      variant="standard"
      defaultValue="cr"
      disableUnderline
    />
  );
};

export default SectionTab;