Kea connect error

example.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import { Provider } from 'react-redux';
import createSagaMiddleware from 'redux-saga';
import 'regenerator-runtime/runtime';
import { kea, connect, keaReducer } from 'kea';

// SETUP STORE
const finalCreateStore = compose(applyMiddleware(createSagaMiddleware()))(
  createStore
);

const scenesReducer = keaReducer('scenes');
const store = finalCreateStore(
  combineReducers({
    scenes: scenesReducer,
  })
);

// LOGIC 1
const logic1 = kea({
  actions: () => ({
    action1: () => ({}),
  }),

  reducers: ({ actions }) => ({
    reducer1: [
      1,
      PropTypes.number,
      {
        [actions.action1]: (state, payload) => state,
      },
    ],
  }),
});

// LOGIC 2
const logic2 = kea({
  actions: () => ({
    action2: () => ({}),
  }),

  reducers: ({ actions }) => ({
    reducer2: [
      2,
      PropTypes.number,
      {
        [actions.action2]: (state, payload) => state,
      },
    ],
  }),
});

// SIMPLE COMPONENT
class App extends Component {
  render() {
    const { reducer1, reducer2 } = this.props;
    return (
      <div>
        <div>
          reducer1 - {reducer1}
        </div>
        <div>
          reducer2 - {reducer2}
        </div>
      </div>
    );
  }
}

// CONNECT THE COMPONENT

// THIS DOESN'T WORK
const ConnectedApp = connect({
  actions: [logic1, ['action1'], logic2, ['action2']],
  props: [logic1, ['reducer1'], logic2, ['reducer2']],
})(App);

// THIS WORKS FINE
// const ConnectedApp = logic1(logic2(App));

// RENDER IT
ReactDOM.render(
  <Provider store={store}>
    <ConnectedApp />
  </Provider>,
  document.getElementById('root')
);