我有一个导入的组件：

import LogoutIcon from "@mui/icons-material/Logout";
import useLogout from "@/hooks/auth/useLogout";

const { trigger: logoutTrigger } = useLogout();

但我使用这个组件的地方是在这里：

<LogoutIcon
              type="button"
              onClick={logoutTrigger}
              sx={LogoutIconSx}
              cursor="pointer"
            />

这一切都被突出显示，并显示以下错误：

(property) onClick: <SWRData = any>(extraArgument?: null | undefined, options?: SWRMutationConfiguration<any, any, never, "/logout", SWRData> | undefined) => Promise<any>
No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any>; } & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "inherit" | ... 8 more ... | undefined; ... 6 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>): Element | null', gave the following error.
Property 'component' is missing in type '{ type: string; onClick: <SWRData = any>(extraArgument?: null | undefined, options?: SWRMutationConfiguration<any, any, never, "/logout", SWRData> | undefined) => Promise<...>; sx: SxProps<...>; cursor: string; }' but required in type '{ component: ElementType<any>; }'.
  Overload 2 of 2, '(props: DefaultComponentProps<SvgIconTypeMap<{}, "svg">>): Element | null', gave the following error.
    Type '<SWRData = any>(extraArgument?: null | undefined, options?: SWRMutationConfiguration<any, any, never, "/logout", SWRData> | undefined) => Promise<any>' is not assignable to type 'MouseEventHandler<SVGSVGElement>'.
Types of parameters 'extraArgument' and 'event' are incompatible.
        Type 'MouseEvent<SVGSVGElement, MouseEvent>' is not assignable to type 'null | undefined'.ts(2769)
OverridableComponent.d.ts(21, 7): 'component' is declared here.
index.d.ts(1484, 9): The expected type comes from property 'onClick' which is declared here on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "inherit" | "disabled" | ... 7 more ... | undefined; ... 6 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>'

这里我有一个钩子：

const cookies = new Cookies();

const fetcher = (url: string) => axios.post(url).then((res) => res.data);

export default function useLogout() {
  const router = useRouter();

  const { trigger, error } = useSWRMutation("/logout", fetcher, {
    onSuccess: () => {
      cookies.remove(ACCESS_TOKEN_COOKIE_NAME);
      router.push("/login");
    },
  });

  return {
    trigger,
    error,
  };
}

我注意到，如果我将onClick={logoutTrigger}更改为onClick={() => console.log(test}，问题就消失了。
另外，如果我设置为anyonClick={logoutTrigger as any}，错误就会消失，但我想避免类型转换。
P.S.我正在使用MUI v5
为什么我得到这个错误？如何修复它？