reactjs - Skicka stat-hanterare till barn med TypeScript


Jag har följande kod; CodeSandbox

App.tsx:

interface IAppDisplayMap {
  [key: string]: (props : IAppComponentProps) => JSX.Element
}

interface IAppComponentProps {
  setAppDisplay: React.Dispatch<React.SetStateAction<string>>
}

const appDisplayMap : IAppDisplayMap = {
  "MainMenu": MainMenu
}

export default function App() {
  const [appDisplay, setAppDisplay] = useState("MainMenu");

  const AppComponent = useMemo(() => appDisplayMap[appDisplay], [appDisplay]);
  return (
    <Wrapper>
      {AppComponent ? <AppComponent setAppDisplay={setAppDisplay} /> : "Invalid AppComponent"}
    </Wrapper>
  )
}

MainMenu.tsx:

export default function MainMenu({setAppDisplay}) {
  return (
    <Wrapper>
      MainMenu
    </Wrapper>
  )
}

Mitt problem är att TS klagar på att setAppDisplay är typat som 'Any'. Med följande kod:

export default function MainMenu({setAppDisplay} : IAppComponentProps) {
  return (
    <Wrapper>
      MainMenu
    </Wrapper>
  )
}

Felet försvinner, men borde inte setAppDisplay härleda dess typ från föräldern ändå?