(React Redux TS) Свойство 'system' не существует для типа 'Readonly <{}> & Readonly <{children ?: ReactNode;}>»

Question

Я пытаюсь передать свойства моему компоненту, но компилятор возвращает ошибку. Я прочитал несколько статей и подобных вопросов о stackoverflow, но большинство из них ссылаются на отсутствие определения реквизита. Я определил интерфейс с определением моих пользовательских реквизитов, поэтому прошу помощи. Я предполагаю, что что-то не так с набором текста.

Вот часть моего кода:

index.tsx

import React from 'react';
import { render } from 'react-dom';
import './index.module.css';
import App from './components/App';
import { Provider } from 'react-redux';
import configureStore from './store';

const store = configureStore();

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root'),
);

Приложение.tsx

import React, { Component, ReactNode } from 'react';
import styles from './App.module.css';
import Login from './Login';
import { MuiThemeProvider } from '@material-ui/core/styles';
import { theme } from '../theme';
import Home from './Home';
import { connect } from 'react-redux';
import { AppState } from '../store';
import { SystemState } from '../store/system/types';

export interface AppProps {
    system: SystemState;
}

class App extends Component<AppProps> {
    constructor(props: AppProps) {
        super(props);
    }

    render(): ReactNode {
        return (
            <MuiThemeProvider theme={theme}>
                <div className={styles.App}>
                    {!this.props.system.isAuthenticated && <Login />} //error
                    {this.props.system.isAuthenticated && <Home />} //error
                </div>
            </MuiThemeProvider>
        );
    }
}

const mapStateToProps = (state: AppState): AppProps => ({
    system: state.system,
});

export default connect<AppProps, {}, {}, AppState>(mapStateToProps)(App);

index.ts

import { createStore, combineReducers, applyMiddleware, Store } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import { systemReducer } from './system/reducers';
import { StateType } from 'typesafe-actions';

const rootReducer = combineReducers({
    system: systemReducer,
});

export type AppState = StateType<ReturnType<typeof rootReducer>>;

export default function configureStore(): Store {
    const middlewares = [thunkMiddleware];
    const middleWareEnhancer = applyMiddleware(...middlewares);

    const store = createStore(rootReducer, composeWithDevTools(middleWareEnhancer));

    return store;
}

Как мне объявить мои реквизиты, чтобы они работали?