Свойство 'map' не существует для типа '() => IterableIterator<number>'

Я пытаюсь передать keys как опору React:

import * as React from "react";
import { render } from "react-dom";

const keys: string[] = ["a", "b"];

function App({keys}: string[]) {
  return (
    <div>
      {keys.map((key: string) => (
        <li>{key}</li>
      ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App keys = {keys} />, rootElement);

Однако я получаю следующие ошибки:

Свойство map не существует для типа '() => IterableIterator'.

Тип 'string[]' нельзя присвоить типу '() => IterableIterator'.

Почему это и как это исправить?

Живой код: https://codesandbox.io/s/change-props-on-react-root-component-forked-9lj9ye?file=/src/index.tsx:0-341