REACT - Function component is not a function declaration

Ok so this one got me scratching my head for a while. After a recent update on some packages I started geting the following error

ESLint: Function component is not a function declaration (react/function-component-definition)

On just about all of my components. My Components mostly look like the below code and the following example shows how it was fixed.

TLDR version

// Turn this 
const ActionButton: React.FC<ActionButtonProps> = (props) => { }

// into 
function ActionButton(props: ActionButtonProps) {}

import { Box, Button, CircularProgress } from '@mui/material';
import React, { MouseEventHandler, ReactChild, ReactChildren } from 'react';
import { useAppSelector } from '../../../store/hooks';

export interface ActionButtonProps {
  /**
   * Checks if the button should be disabled
   */
  isDisabled: boolean;
  /**
   * Determines if the component is submitting. Results in disabled and spinner
   */
  isSubmitting: boolean;
  /**
   * Children to be displayed in the button
   */
  children: string | ReactChild | ReactChild[] | ReactChildren | ReactChildren[];
  /**
   * Function for clicking
   */
  onClick?: MouseEventHandler<any> | undefined;
  /**
   * The Type of button it is Reset, Button, Submit
   */
  type?: 'button' | 'submit' | 'reset' | undefined;
  /**
   * The type of button to be used
   * one of 'outlined' | 'text' | 'contained'
   */
  variant?: 'outlined' | 'text' | 'contained';
  /**
   * Determines if the spinner is to be shown or not.
   * @type {boolean}
   */
  showSpinner?: boolean;
  /**
   * Determines if the button is full width or not.
   * @type {boolean}
   */
  fullWidth?: boolean;
}

const ActionButton: React.FC<ActionButtonProps> = ({
  isDisabled = false,
  children,
  onClick = undefined,
  variant = 'contained',
  showSpinner = false,
  isSubmitting = false,
  type = 'submit',
  fullWidth = false,
}) => {
  const darkMode = useAppSelector((state) => state.darkMode);
  return (
    <Button
      disabled={isDisabled || isSubmitting}
      onClick={onClick}
      variant={variant}
      type={type}
      fullWidth={fullWidth}
    >
      {(showSpinner || isSubmitting)
      && (
        <Box sx={{ mr: 2 }}>
          <CircularProgress
            aria-describedby="submit-button"
            size={12}
            sx={{ color: darkMode ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.3)' }}
          />
        </Box>

      )}
      {children}
    </Button>
  );
}

export default ActionButton;

After reading lots of different articles and trying a few things this has now become.

import { Box, Button, CircularProgress } from '@mui/material';
import React, { MouseEventHandler, ReactChild, ReactChildren } from 'react';
import { useAppSelector } from '../../../store/hooks';

export interface ActionButtonProps {
  /**
   * Checks if the button should be disabled
   */
  isDisabled: boolean;
  /**
   * Determines if the component is submitting. Results in disabled and spinner
   */
  isSubmitting: boolean;
  /**
   * Children to be displayed in the button
   */
  children: string | ReactChild | ReactChild[] | ReactChildren | ReactChildren[];
  /**
   * Function for clicking
   */
  onClick?: MouseEventHandler<any> | undefined;
  /**
   * The Type of button it is Reset, Button, Submit
   */
  type?: 'button' | 'submit' | 'reset' | undefined;
  /**
   * The type of button to be used
   * one of 'outlined' | 'text' | 'contained'
   */
  variant?: 'outlined' | 'text' | 'contained';
  /**
   * Determines if the spinner is to be shown or not.
   * @type {boolean}
   */
  showSpinner?: boolean;
  /**
   * Determines if the button is full width or not.
   * @type {boolean}
   */
  fullWidth?: boolean;
}

function ActionButton({
  isDisabled = false,
  children,
  onClick = undefined,
  variant = 'contained',
  showSpinner = false,
  isSubmitting = false,
  type = 'submit',
  fullWidth = false,
}: ActionButtonProps) {
  const darkMode = useAppSelector((state) => state.darkMode);
  return (
    <Button
      disabled={isDisabled || isSubmitting}
      onClick={onClick}
      variant={variant}
      type={type}
      fullWidth={fullWidth}
    >
      {(showSpinner || isSubmitting)
      && (
        <Box sx={{ mr: 2 }}>
          <CircularProgress
            aria-describedby="submit-button"
            size={12}
            sx={{ color: darkMode ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.3)' }}
          />
        </Box>

      )}
      {children}
    </Button>
  );
}

export default ActionButton;

references

https://eslint.org/docs/rules/func-names
https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md