Cannot display data in the table - react-tsx

Question

Problem:
It doesn't work to use " const [data, setData] = useState<IHit[]>([]);" because I get the error "data.map is not a function"
What part am I missing?
Thank you!
import React, { useState, useEffect } from 'react';
import { render } from 'react-dom';
import axios from 'axios';
import './style.css';
import { IHit } from './responseTypes';
function App() {
const [data, setData] = useState<IHit[]>([]);
const [query, setQuery] = useState('react');
useEffect(() => {
let ignore = false;
console.log('useeffect: ', ignore);
async function fetchData() {
const result = await axios(
'https://hn.algolia.com/api/v1/search?query=' + query
);
if (!ignore) setData(result.data);
}
fetchData();
return () => {
ignore = true;
console.log('return: ', ignore);
};
}, [query]);
if (data.length === 0) return <div>Testtest</div>;
return (
<div>
<input value={query} onChange={(e) => setQuery(e.target.value)} />
<ul>
{data.map(({ url, objectID, title }: IHit) => (
<a href={url}>
<li key={objectID}>{title}</li>
</a>
))}
</ul>
</div>
);
}
render(<App />, document.getElementById('root'));
https://stackblitz.com/edit/usereducer-typescript-state-uaft7n?file=index.tsx