React + Redux + TypeScriptでのボタン実装

Question

前提・実現したいこと

React + Redux + TypeScript でサイドメニュー用のボタンを実装しようとしています。
Qiitaなどを参考に書いてみたのですが、いまいち問題になっている理由などわからないので質問させて頂きました。

発生している問題・エラーメッセージ

Argument of type 'StyledComponent<PropsWithChildren<OwnProps & DrawerState & DrawerActions & { className?: string | undefined; }>, Pick<PropsWithChildren<OwnProps & DrawerState & DrawerActions & { className?: string | undefined; }>, "drawn" | ... 2 more ... | "children">, object>' is not assignable to parameter of type 'ComponentType<Matching<DrawerState & { updateDrawer: () => void; }, OwnProps & DrawerState & DrawerActions & { className?: string | undefined; } & { children?: ReactNode; } & Pick<PropsWithChildren<OwnProps & DrawerState & DrawerActions & { ...; }>, "drawn" | ... 2 more ... | "children"> & { ...; }>>'.
  Type 'StyledComponent<PropsWithChildren<OwnProps & DrawerState & DrawerActions & { className?: string | undefined; }>, Pick<PropsWithChildren<OwnProps & DrawerState & DrawerActions & { className?: string | undefined; }>, "drawn" | ... 2 more ... | "children">, object>' is not assignable to type 'FunctionComponent<Matching<DrawerState & { updateDrawer: () => void; }, OwnProps & DrawerState & DrawerActions & { className?: string | undefined; } & { children?: ReactNode; } & Pick<PropsWithChildren<OwnProps & DrawerState & DrawerActions & { ...; }>, "drawn" | ... 2 more ... | "children"> & { ...; }>>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'PropsWithChildren<Matching<DrawerState & { updateDrawer: () => void; }, OwnProps & DrawerState & DrawerActions & { className?: string | undefined; } & { children?: ReactNode; } & Pick<PropsWithChildren<OwnProps & DrawerState & DrawerActions & { ...; }>, "drawn" | ... 2 more ... | "children"> & { ...; }>>' is not assignable to type 'OwnProps & DrawerState & DrawerActions & { className?: string | undefined; } & { children?: ReactNode; } & Pick<PropsWithChildren<OwnProps & DrawerState & DrawerActions & { className?: string | undefined; }>, "drawn" | ... 2 more ... | "children"> & { ...; }'.
        Type 'PropsWithChildren<Matching<DrawerState & { updateDrawer: () => void; }, OwnProps & DrawerState & DrawerActions & { className?: string | undefined; } & { children?: ReactNode; } & Pick<PropsWithChildren<OwnProps & DrawerState & DrawerActions & { ...; }>, "drawn" | ... 2 more ... | "children"> & { ...; }>>' is not assignable to type 'DrawerActions'.
          Types of property 'updateDrawer' are incompatible.
            Type '() => void' is not assignable to type '() => Action<{}>'.
              Type 'void' is not assignable to type 'Action<{}>'.ts(2345)

該当のソースコード

DrawerActions

import actionCreatorFactory from 'typescript-fsa';

const actionCreator = actionCreatorFactory();

export const DrawerActions = {
  updateDrawer: actionCreator('ACTIONS_UPDATE_DRAWER')
};

DrawerState.tsx

import { reducerWithInitialState } from 'typescript-fsa-reducers';
import { DrawerActions } from '../actions/DrawerActions';

export interface DrawerState {
  drawn: boolean;
}

const initialState: DrawerState = {
  drawn: true
};

export const DrawerReducer = reducerWithInitialState(initialState)
  .case(DrawerActions.updateDrawer, (state=initialState) => {
    return Object.assign({}, state, { drawn: !state.drawn })
});

DrawerStore.tsx

import { createStore, combineReducers } from 'redux';
import { DrawerReducer, DrawerState } from '../states/DrawerState';

export type AppState = {
  drawn: DrawerState
};

const store = createStore(
  combineReducers<AppState>({
    drawn: DrawerReducer
  })
);

// const store = createStore(DrawerReducer)

export default store;

container.tsx

import { Action } from 'typescript-fsa';
import { Dispatch } from 'redux';
import { connect } from 'react-redux';
import { AppState } from '../../stores/DrawerStore';
import { DrawerActions } from '../../actions/DrawerActions';
import { StyledSideMenu } from './sidemenu';

export interface DrawerActions {
  updateDrawer: () => Action<{}>;
}


const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    updateDrawer: () => { dispatch(DrawerActions.updateDrawer()) }
  }
}

const mapStateToProps = (appState: AppState) => {
  return Object.assign({}, appState.drawn);
}

export default connect(mapStateToProps, mapDispatchToProps)(StyledSideMenu);

sidemenu.tsx

import React from 'react';
import { Nav } from './nav';
import { useSpring, animated } from "react-spring";
import { DrawerState } from '../../states/DrawerState';
import { DrawerActions } from './container'

interface OwnProps {}

type DrawerProps = OwnProps & DrawerState & DrawerActions;

const SideMenu: React.FCX<DrawerProps> = (props: DrawerProps, { className }) => {

  const settings = useSpring({
    from: { opacity: 0 },
    to: { 
      opacity: props.drawn ? 1 : 0,
      transform: props.drawn ? 'translate3d(0px, 0, 0)' : 'translate3d(200px, 0, 0)'
    },
    config: { mass: 0.7, friction: 20, tension: 100 }
  });
  return (
    <>
      <button onClick={() => props.updateDrawer() }>
        toggle
      </button>
      <animated.nav className={className} style={{ ...settings }}>
        <Nav />
      </animated.nav>
    </>
  );
};

Answer 1

型を割り当てられない、パラメータが非互換などと表示されてますのでそれらが理由かと思います。
一つ一つ型を修正していきましょう。