How to use the @fortawesome/react-fontawesome.FontAwesomeIcon.propTypes function in @fortawesome/react-fontawesome

import { faAngleUp } from "@fortawesome/free-solid-svg-icons/faAngleUp";
import { faAngleDown } from "@fortawesome/free-solid-svg-icons/faAngleDown";

const IconTd = ({ icon, onClick }) => (
  
    <span>
      
    </span>
  
);
IconTd.propTypes = {
  icon: FontAwesomeIcon.propTypes.icon.isRequired,
  onClick: PropTypes.func.isRequired
};

const HourMinute = observer(
  class HourMinute extends Component {
    static propTypes = {
      dateValue: PropTypes.instanceOf(moment).isRequired,
      onHourInc: PropTypes.func.isRequired,
      onHourDec: PropTypes.func.isRequired,
      onMinuteInc: PropTypes.func.isRequired,
      onMinuteDec: PropTypes.func.isRequired
    };

    render() {
      const {
        dateValue,

import { faCircleNotch } from "@fortawesome/free-solid-svg-icons/faCircleNotch";
import { faPauseCircle } from "@fortawesome/free-regular-svg-icons/faPauseCircle";

import { AlertStore, AlertStoreStatuses } from "Stores/AlertStore";

const FetchIcon = ({ icon, color, visible, spin }) => (
  
);
FetchIcon.propTypes = {
  icon: FontAwesomeIcon.propTypes.icon.isRequired,
  color: PropTypes.string,
  visible: PropTypes.bool,
  spin: PropTypes.bool
};
FetchIcon.defaultProps = {
  color: "muted",
  visible: true,
  spin: false
};

const FetchIndicator = observer(
  class FetchIndicator extends Component {
    static propTypes = {
      alertStore: PropTypes.instanceOf(AlertStore).isRequired
    };

import { TooltipWrapper } from "Components/TooltipWrapper";
import { GroupHeader } from "./GroupHeader";
import { Alert } from "./Alert";
import { GroupFooter } from "./GroupFooter";

const LoadButton = ({ icon, action, tooltip }) => {
  return (
    
      <button type="button">
        
      </button>
    
  );
};
LoadButton.propTypes = {
  icon: FontAwesomeIcon.propTypes.icon.isRequired,
  action: PropTypes.func.isRequired,
  tooltip: PropTypes.node.isRequired
};

const AllAlertsAreUsingSameAlertmanagers = alerts =&gt; {
  const usedAMs = alerts.map(alert =&gt;
    alert.alertmanager.map(am =&gt; am.name).sort()
  );
  return usedAMs.every(
    listOfAMs =&gt; JSON.stringify(listOfAMs) === JSON.stringify(usedAMs[0])
  );
};

const AlertGroup = observer(
  class AlertGroup extends Component {
    static propTypes = {

<input autocomplete="{autoComplete}" required="" value="{value}" placeholder="{placeholder}" type="{type}">
  
);
IconInput.propTypes = {
  type: PropTypes.string.isRequired,
  autoComplete: PropTypes.string.isRequired,
  icon: FontAwesomeIcon.propTypes.icon.isRequired,
  placeholder: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired
};

const SilenceForm = observer(
  class SilenceForm extends Component {
    static propTypes = {
      alertStore: PropTypes.instanceOf(AlertStore).isRequired,
      silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired,
      settingsStore: PropTypes.instanceOf(Settings).isRequired,
      previewOpen: PropTypes.bool.isRequired
    };

    constructor(props) {
      super(props);

const ActionButton = ({ color, icon, title, action, afterClick }) => (
  <button> {
      action();
      afterClick();
    }}
  &gt;
    
    {title}
  </button>
);
ActionButton.propTypes = {
  color: PropTypes.string.isRequired,
  title: PropTypes.node.isRequired,
  icon: FontAwesomeIcon.propTypes.icon.isRequired,
  action: PropTypes.func.isRequired,
  afterClick: PropTypes.func.isRequired
};

const HistoryMenuContent = ({
  popperPlacement,
  popperRef,
  popperStyle,
  filters,
  alertStore,
  settingsStore,
  afterClick,
  onClear
}) =&gt; {
  return (