Как подключить Redux к Классовому компоненту Next.js

Доброго времени суток!

Потратил уже 4 дня на попытку выстроить адекватную структуру сайта HOC + Layout + pages. И теперь не получается подключить к HOC redux через connect. Буду очень благодарен за вашу помощь в решении этого вопроса!!! Привел весь возможный код который затрагивается в работе этого шаблона. Брал основу я с этой статьи :

Persistent Layout Patterns in Next.js

Я получаю ошибку:

Error: You must pass a component to the function returned by connect. Instead received {"key":null,"ref":null,"props":{"children":{"key":null,"ref":null,"props":{"children":{"type":{"compare":null,"displayName":"Connect(Panel)"},"key":null,"ref":null,"props":{"Component":{"compare":null,"displayName":"Connect(Panel)"},"router":{"route":"/test","pathname":"/test","query":{},"asPath":"/test","basePath":"","isFallback":false},"pageProps":{}},"_owner":null,"_store":{}}},"_owner":null,"_store":{}}},"_owner":null,"_store":{}}

HOC:

import React, { Component } from 'react'
import Router from 'next/router'
import { connect } from 'react-redux';

class WithAdmin extends Component {
    constructor(props) {
        super(props)

        this.state = {
        }
    }

    componentDidMount() {
    }
    render() {
        return (
            <div><h1>{this.props.token}</h1>{this.props.children}</div>
        )
    }
}

const mapState = state => ({
    token: state.auth.token,
})

const mapDispatch = dispatch => ({
    getAccount: (token) => dispatch(getAccountAction(token))
})

export const getLayout = page => connect(mapState, mapDispatch)(<WithAdmin>{page}</WithAdmin>)

Если заменяю это

export const getLayout = page => connect(mapState, mapDispatch)(<WithAdmin>{page}</WithAdmin>)

на это:

export const getLayout = page => <WithAdmin>{page}</WithAdmin>

все работает отлично только вот данные с стора я получить не могу =(

Layout:

import { getLayout as getSiteLayout } from './WithAdmin'

const AccountSettingsLayout = ({ children }) => (
  <div><h2>middleware_layout_2</h2>{children}</div>
)

export const getLayout = page => getSiteLayout(<AccountSettingsLayout>{page}</AccountSettingsLayout>)

По хорошему и в HOC и в Layout мне надо подключить redux...

на всякий случай привожу свой _app.js и пример страницы.

app:

import App from 'next/app';
import { Provider } from 'react-redux';
import store from 'store';
import { SnackbarProvider } from 'notistack';

class MyApp extends App {
    render() {
        const { Component, pageProps } = this.props
        const getLayout = Component.getLayout || (page => page)
        console.log(getLayout)

        return (
            <Provider store={store}>
                <SnackbarProvider>
                    {getLayout(<Component {...this.props} />)}
                </SnackbarProvider>
            </Provider>
        )
    }
}

export default MyApp

example page:

import { getLayout } from 'middleware/AdminLayout'
import { connect } from 'react-redux';
import { Component } from 'react'

class Panel extends Component {
    async componentDidMount() {

    }
    render() {
        return (
            <div><h1>Test</h1></div>
        )
    }
}

Panel.getLayout = getLayout

const mapState = state => ({
    test: state.account.test
})
const mapDispatch = dispatch => ({

})

export default connect(mapState, mapDispatch)(Panel)