redefined props of button component

packages/app/src/components/Sidebar/CustomSidebar.tsx

@@ -48,7 +48,7 @@ const CustomSidebar: FC = () => {
           {t('CustomSidebar')}
           <Link href="/Sidebar"><a className="h6 ml-2"><i className="icon-pencil"></i></a></Link>
         </h3>
-        <SidebarHeaderReloadButton onClick={mutate} />
+        <SidebarHeaderReloadButton onClick={() => mutate()} />
       </div>
 
       {

packages/app/src/components/Sidebar/RecentChanges.tsx

@@ -131,14 +131,17 @@ const SmallPageItem = memo(({ page }: PageItemProps): JSX.Element => {
 SmallPageItem.displayName = 'SmallPageItem';
 
 const RecentChanges = (): JSX.Element => {
+
   const PER_PAGE = 20;
   const { t } = useTranslation();
   const swr = useSWRInifinitexRecentlyUpdated();
   const { data, error, mutate } = swr;
+
   const [isRecentChangesSidebarSmall, setIsRecentChangesSidebarSmall] = useState(false);
   const isEmpty = data?.[0].length === 0;
   const isLoading = error == null && data === undefined;
   const isReachingEnd = isEmpty || (data && data[data.length - 1]?.length < PER_PAGE);
+
   const retrieveSizePreferenceFromLocalStorage = useCallback(() => {
     if (window.localStorage.isRecentChangesSidebarSmall === 'true') {
       setIsRecentChangesSidebarSmall(true);
@@ -159,7 +162,7 @@ const RecentChanges = (): JSX.Element => {
     <div data-testid="grw-recent-changes">
       <div className="grw-sidebar-content-header p-3 d-flex">
         <h3 className="text-nowrap">{t('Recent Changes')}</h3>
-        <SidebarHeaderReloadButton onClick={mutate}/>
+        <SidebarHeaderReloadButton onClick={() => mutate()}/>
         <div className="d-flex align-items-center">
           <div className={`grw-recent-changes-resize-button ${styles['grw-recent-changes-resize-button']} custom-control custom-switch ml-1`}>
             <input

packages/app/src/components/Sidebar/SidebarHeaderReloadButton.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
 
-export const SidebarHeaderReloadButton = ({ onClick }) => {
+type Props = {
+  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+};
+
+export const SidebarHeaderReloadButton = ({ onClick }: Props) => {
 
   return (
-    <button type="button" className="btn btn-sm ml-auto grw-btn-reload" onClick={() => onClick()}>
+    <button type="button" className="btn btn-sm ml-auto grw-btn-reload" onClick={onClick}>
       <i className="icon icon-reload"></i>
     </button>
   );

packages/app/src/components/Sidebar/Tag.tsx

@@ -46,7 +46,7 @@ const Tag: FC = () => {
     <div className="grw-container-convertible px-4 mb-5 pb-5" data-testid="grw-sidebar-content-tags">
       <div className="grw-sidebar-content-header py-3 d-flex">
         <h3>{t('Tags')}</h3>
-        <SidebarHeaderReloadButton onClick={onReload}/>
+        <SidebarHeaderReloadButton onClick={() => onReload()}/>
       </div>
 
       <h3 className="my-3">{t('tag_list')}</h3>