Within my component, I am importing the following:
import LogoutIcon from "@mui/icons-material/Logout";
import useLogout from "@/hooks/auth/useLogout";
const { trigger: logoutTrigger } = useLogout();
However, when utilizing this component as shown below, an error is highlighted:
<LogoutIcon
type="button"
onClick={logoutTrigger}
sx={LogoutIconSx}
cursor="pointer"
/>
The full error message is as follows:
(property) onClick: <SWRData = any>(extraArgument?: null | undefined, options?: SWRMutationConfiguration<any, any, never, "/logout", SWRData> | undefined) => Promise<any>
No overload matches this call.
(...)
In addition to that, here is the snippet of the hook being used:
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,
};
}
Upon further investigation, I found that changing onClick={logoutTrigger} to
onClick={() => console.log(test}A temporary workaround involves setting onClick={logoutTrigger as any}, eliminating the error at hand. However, ideally, I want to avoid type casting.
For context, I am using MUI v5. Can someone shed light on why this error is occurring and suggest how to rectify it?