1233211

Потому что нет try catch конструкции, а это уже deprecated по умолчанию..
Во втором случае вам промис вернётся и уже за функцией можно обрабатывать ошибку. В противном случае у вас двойная обработка(как минимум) получится

Сделать из столбцов строки:

const rows = useMemo(() => data.length
  ? data[0].arr.map((n, i) => data.map(m => m.arr[i]))
  : []
, [ data ]);

Ну и отрендерить:

<table>
  <tbody>
    {rows.map(n => <tr>{n.map(m => <td>{m}</td>)}</tr>)}
  </tbody>
</table>

https://jsfiddle.net/s9q0xr78/

Вы прописали свойство для трансформаций (scale, rotate и тд), fade in наверно надо делать через opacity? Соответственно: transition: opacity 0.5s cubic-bezier(0, 0, 1, 1);

<div style={сюда кидаете объект со стилями, которому назначаете свойства в зависимости от своих переменных}>

например

<div style={true ? { backgroundColor: 'red' } : {}}>

Это просто объект.