Aetae

1. accum у тебя {} - объект без типа. Задай ему тип: {} as SomeType. Как минимум сделай его словарём: {} as Record<string, IListTV>.

2. Используй e.currentTarget - e.target в теории может быть каким-то вложенным элементом, а потому "не может быть" автоматически типизирован.

store.dispatch?

const PeoplePageWithErrorApi = WithErrorApi(PeoplePage)

<PeoplePageWithErrorApi foo="bar"> 
// props = {foo: bar} 
// внутри PeoplePage props {
//  foo: 'bar', 
//  setErrorApi: setErrorApi из WithErrorApi, 
//  setLoader: setLoader из WithErrorApi, 
//  isLoading: isLoading из WithErrorApi
//}

Очевидно же, нет?

Потому что html не учитывает переносы строк и лишние пробелы. Ты должен их указать явно как br или использовать тег\css pre.
Те переносы что есть - они есть не потому что ты их указал, а потому что строчки достаточно длинные.

Условно как-то так:

useEffect(() => {
  const fetchData = async (url: string, data: any[] = []) => {
    const res = await fetch(url);
    const json = await res.json();
    if(json.pagination.links.next){
      await fetchData(json.pagination.links.next, data)
    }
    data.push(json.data);
    return data;
  };
  
  fetchData("https://gorest.co.in/public/v1/users").then(setData);
}, [url]);

в data будет массив.

Кстати рекурсия тут не обязательна:

useEffect(() => {
  const fetchData = async (url: string) => {
    let data: any[] = [];

    do {
      const res = await fetch(url);
      const json = await res.json();

      data.push(json.data);

      url = json.pagination.links.next;
    } while (url);

    return data;
  };

  fetchData("https://gorest.co.in/public/v1/users").then(setData);
}, [url]);

Ну и вместо any - расставить твои типы надо.

Естественно компилирует всё что нужно для реакта из node_modules.
А как иначе реакт работать то будет, без самого реакта?)

export const Film = ({ film }: { film: IFilm ): ReactElement => {
  return <div></div>;
};

А лучше:

export const Film: React.FC<{
  film: IFilm
}> = ({ 
  film 
}) => {
  return <div></div>;
};

Лучше сразу на React. React - не Vue, он не html-совместим, придётся бессмысленно тратить время ещё и на перекорячивание.

Юзай classNames.
Без этой либы не жизнь.)

В typescript то что после двоеточия - это описание типов. Для js оно не нужно и в принципе, в его понимании, не существует.

Убери его, и всё заработает:

import { DocumentRenderer } from '@keystone-next/document-renderer';

const renderers = {
  inline: {
    bold: ({ children }) => {
      return <strong>{children}</strong>;
    },
  },
  block: {
    paragraph: ({ children, textAlign }) => {
      return <p style={{ textAlign }}>{children}</p>;
    },
  },
};

<DocumentRenderer document={document} renderers={renderers} />;

const [data, setData] = useState([]);

Сейчас по порядку у тебя так:
1.

const [data, setData] = useState(); // data === undefined

2. data.map((item, idx) => ( // error
3. fetchData
4. Цифры текут по проводам...
5. setData // data === json с сервера
6. data.map((item, idx) => ( // ok

Неправильно понимаешь.
К jsx это вообще отношения не имеет.
Включённое по умолчанию eslint правило не любит когда тренарный оператор "висит в воздухе"(не назначен переменной или не передан в функцию, например). Перепиши на if else, как-то используй результат(например return isOnSa...), или отключи\заигнорь правило - никакой реальной проблемы тут нет, просто такие конструкции зачастую могут быть ошибкой(когда ты просто забыл использовать результат).