React + Reduxにおけるdispatch時のエラー

概要

現在、TypeScript + React + Reduxを用いた開発を行っています。
仮のログアウト機能を実装中にエラーが発生しました。
具体的には、actionをdispatchした際にエラーが発生します。
どうやら下記のjwtLogout内のdispatchで発生している様です。
自分なりに色々調べてみましたが, connect等を用いた解決方法は見つかれど、Hooksを用いた解決方法が中々見つからず、今回は質問させて頂きました。
どなたか解決方法のご教授お願いいたします。

エラーの内容

TypeError: dispatch is not a function

該当のコード

TypeScript
1// reducer
2
3import * as actionTypes from '../utils/actionTypes'
4import * as actions from '../actions'
5
6type Actions = (
7    | ReturnType<typeof actions.startRequest>
8    | ReturnType<typeof actions.completeRequest>
9)
10
11interface iState {
12    isRequesting: boolean
13}
14
15const initialState: iState = {
16    isRequesting: false,
17}
18
19const RequestReducer = (state: iState = initialState, action: Actions) => {
20    switch (action.type) {
21        case actionTypes.START_REQUEST:
22            return {
23                ...state,
24                isRequesting: true
25            }
26        case actionTypes.COMPLETE_REQUEST:
27            return {
28                ...state,
29                isRequesting: false
30            }
31    }
32
33    return state
34}
35
36export default RequestReducer

TypeScript
1// actions
2
3import { Dispatch } from "react"
4import { Action } from "redux"
5import * as actionTypes from "../utils/actionTypes"
6
7export interface Actions {
8    type: String;
9    payload: any;
10}
11
12略 。。。
13
14export const jwtLogout = () => {
15    return async (dispatch: Dispatch<Action>) => {
16        // TODO: gRpcログアウト && try-catch
17        dispatch({ type: actionTypes.START_REQUEST })
18
19        console.log('Logout')
20        localStorage.removeItem('token')
21
22        dispatch({ type: actionTypes.COMPLETE_REQUEST })
23        dispatch({ type: actionTypes.UNAUTHENTICATE_USER })
24        dispatch(setNotification('success', 'ログアウト成功！'))
25    }
26}

##追記
Material-UIでDrawerの中身をログイン時と非ログイン時で分けているのですが、非ログイン時に表示されるログアウト項目をクリックするとjwtLogoutが発火するというイメージです。

TypeSciript
1略。。。
2
3const DrawerItems: React.FC = () => {
4    const [open, setOpen] = React.useState(false)
5    const dispatch = useDispatch()
6
7    const isAuthenticated = useSelector((state: any) => state.AuthReducer.isAuthenticated)
8
9    const handleDrawerToggle = () => {
10        setOpen(!open)
11    }
12    const openLoginDialog = () => {
13        dispatch({ type: actionTypes.OPEN_LOGIN_DIALOG })
14        handleDrawerToggle()
15    }
16
17    const unAuthenticated = (
18      略。。。
19    )
20
21    const authenticated = (
22        <>
23           略。。。
24            <List onClick={handleDrawerToggle}>
25                <StyledLink to="/mypage">
26                    <ListItem button>
27                        <ListItemIcon>
28                            <AccountCircle />
29                        </ListItemIcon>
30                        <ListItemText primary="マイページ" />
31                    </ListItem>
32                </StyledLink>
33            </List>
34            <List onClick={dispatch(actions.jwtLogout)}>
35                <StyledLink to="/logout">
36                    <ListItem button>
37                        <ListItemIcon>
38                            <Lock />
39                        </ListItemIcon>
40                        <ListItemText primary="ログアウト" />
41                    </ListItem>
42                </StyledLink>
43            </List>
44            <List onClick={handleDrawerToggle}>
45                <StyledLink to="/about">
46                    <ListItem button>
47                        <ListItemIcon>
48                            <InfoIcon />
49                        </ListItemIcon>
50                        <ListItemText primary="自動販売機とは" />
51                    </ListItem>
52                </StyledLink>
53            </List>
54        </>
55    )
56
57    return (
58        <>
59        { isAuthenticated === true ? authenticated : unAuthenticated }
60        </>
61    )
62}
63
64const StyledLink = styled(Link)`
65    text-decoration: none;
66    color: black;
67`
68
69export default DrawerItems

追記２

DrawerItemsはMaterial-UIのDrawerの中のリストとしてインポートしています。（下から３行目）

略。。。
            <IconButton
                color="inherit"
                aria-label="open drawer"
                edge="start"
                onClick={handleDrawerToggle}
            >
                <MenuIcon />
            </IconButton>
            <nav aria-label="menu">
                {/* The implementation can be swapped with js to avoid SEO duplication of Styledlinks. */}
                <Hidden smUp implementation="css">
                    <Drawer
                        variant="temporary"
                        anchor="left"
                        open={open}
                        onClose={handleDrawerToggle}
                        ModalProps={{
                            keepMounted: true, // Better open performance on mobile.
                        }}
                        classes={{
                            paper: classes.drawerPaper,
                        }}
                    >
                        <div className={classes.toolbar} />
                        <Divider />
                        <DrawerItems />
                    </Drawer>
                </Hidden>

追記３

<List onClick={dispatch(actions.jwtLogout)}>の前に、console.log(dispatch)とconsole.log(dispatch(actions.jwtLogout))を実行したところ下記の様に表示されました。

ƒ (action) {
        if (typeof action === 'function') {
          return action(dispatch, getState, extraArgument);
        }

        return next(action);
}

async dispatch => {
    // TODO: gRpcログアウト && try-catch
    dispatch({
      type: _utils_actionTypes__WEBPACK_IMPORTED_MODULE_0__["START_REQUEST"]
    });
    console.log('Logout');
    localStorage…