.map is not a function - React Typescript (API axios Get call)

Question

I'm having trouble using axios to call my API. Upon doing so, I am unable to use the map function on the response for some reason.

error message

here is my code:

interface IBloodWork {
id: number;
date: string;
description: string;
examData: string;
}

const defaultBloodWorks: IBloodWork[] = [];

const App: React.SFC = () => {
const [bloodworks, setBloodWorks]: [IBloodWork[], (bloodworks: IBloodWork[]) => void] = React.useState(
defaultBloodWorks
);

const [error, setError]: [string, (error: string) => void] = React.useState(
''
);

React.useEffect(() => {
axios
  .get<IBloodWork[]>('https://localhost:44395/v1/GetBloodWork', {
    headers: {
      'Content-Type': 'application/json',
    }
  })
  .then((response) => {
    setBloodWorks(response.data);
  })
  .catch((ex) => {
    const err = axios.isCancel(ex)
      ? 'Resource not found'
      : 'An unexpected error has occurred';
    setError(err);
  });
}, []);
return (
<div className="App">
 <ul className="bloodworks">
   {bloodworks.map((bloodwork) => (
    <li key={bloodwork.id}>
     <h3>{bloodwork.date}</h3>
     <p>{bloodwork.description}</p>
    </li>
  ))}
 </ul>
 {error && <p className="error">{error}</p>}
</div>
);
}

postman result

if someone can provide some guidance on how I can fix this, id appreciate it! Thank you