diff --git a/web/ui/react-app/src/pages/TSDBStatus.test.tsx b/web/ui/react-app/src/pages/TSDBStatus.test.tsx
index cefdcd375..fead1b4ad 100644
--- a/web/ui/react-app/src/pages/TSDBStatus.test.tsx
+++ b/web/ui/react-app/src/pages/TSDBStatus.test.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { mount, shallow, ReactWrapper } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import { Alert, Table, Badge } from 'reactstrap';
+import { Alert, Table } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { TSDBStatus } from '.';
-import { TSDBMap, Stats } from './TSDBStatus';
+import { TSDBMap } from './TSDBStatus';
 
 const fakeTSDBStatusResponse: {
   status: string;
@@ -46,7 +46,7 @@ const fakeTSDBStatusResponse: {
 
 describe('TSDB Stats', () => {
   beforeEach(() => {
-    fetch.resetMocks();
+    fetchMock.resetMocks();
   });
 
   it('before data is returned', () => {
@@ -58,9 +58,9 @@ describe('TSDB Stats', () => {
 
   describe('when an error is returned', () => {
     it('displays an alert', async () => {
-      const mock = fetch.mockReject(new Error('error loading tsdb status'));
+      const mock = fetchMock.mockReject(new Error('error loading tsdb status'));
 
-      let page: ReactWrapper;
+      let page: any;
       await act(async () => {
         page = mount(<TSDBStatus pathPrefix="/path/prefix" />);
       });
@@ -94,8 +94,8 @@ describe('TSDB Stats', () => {
         },
       ];
 
-      const mock = fetch.mockResponse(JSON.stringify(fakeTSDBStatusResponse));
-      let page: ReactWrapper;
+      const mock = fetchMock.mockResponse(JSON.stringify(fakeTSDBStatusResponse));
+      let page: any;
       await act(async () => {
         page = mount(<TSDBStatus pathPrefix="/path/prefix" />);
       });
@@ -104,17 +104,17 @@ describe('TSDB Stats', () => {
       expect(mock).toHaveBeenCalledWith('/path/prefix/api/v1/status/tsdb', undefined);
 
       for (let i = 0; i < tables.length; i++) {
-        let data = tables[i].data;
-        let table = page
+        const data = tables[i].data;
+        const table = page
           .find(Table)
           .at(tables[i].table_index)
           .find('tbody');
-        let rows = table.find('tr');
+        const rows = table.find('tr');
         for (let i = 0; i < data.length; i++) {
           const firstRowColumns = rows
             .at(i)
             .find('td')
-            .map(column => column.text());
+            .map((column: ReactWrapper) => column.text());
           expect(rows.length).toBe(data.length);
           expect(firstRowColumns[0]).toBe(data[i].name);
           expect(firstRowColumns[1]).toBe(data[i].value.toString());
diff --git a/web/ui/react-app/src/pages/TSDBStatus.tsx b/web/ui/react-app/src/pages/TSDBStatus.tsx
index 0519a7373..f045441c8 100644
--- a/web/ui/react-app/src/pages/TSDBStatus.tsx
+++ b/web/ui/react-app/src/pages/TSDBStatus.tsx
@@ -51,9 +51,9 @@ function createTable(title: string, unit: string, stats: Array<Stats>) {
 }
 
 const TSDBStatus: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix }) => {
-  const { response, error } = useFetch(`${pathPrefix}/api/v1/status/tsdb`);
+  const { response, error } = useFetch<TSDBMap>(`${pathPrefix}/api/v1/status/tsdb`);
   const headStats = () => {
-    const stats = response && (response.data as TSDBMap);
+    const stats = response && response.data;
     if (error) {
       return (
         <Alert color="danger">
diff --git a/web/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx b/web/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx
index 8363b0b23..0da9a7b29 100644
--- a/web/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx
+++ b/web/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx
@@ -8,6 +8,7 @@ import ScrapePoolPanel from './ScrapePoolPanel';
 import { Target } from './target';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { FetchMock } from 'jest-fetch-mock/types';
 
 describe('Flags', () => {
   const defaultProps = {
@@ -16,7 +17,7 @@ describe('Flags', () => {
   };
 
   beforeEach(() => {
-    fetch.resetMocks();
+    fetchMock.resetMocks();
   });
 
   describe('before data is returned', () => {
@@ -35,7 +36,7 @@ describe('Flags', () => {
 
   describe('when data is returned', () => {
     let scrapePoolList: ReactWrapper;
-    let mock: Promise<Response>;
+    let mock: FetchMock;
     beforeEach(() => {
       //Tooltip requires DOM elements to exist. They do not in enzyme rendering so we must manually create them.
       const scrapePools: { [key: string]: number } = { blackbox: 3, node_exporter: 1, prometheus: 1 };
@@ -46,7 +47,7 @@ describe('Flags', () => {
           document.body.appendChild(div);
         });
       });
-      mock = fetch.mockResponse(JSON.stringify(sampleApiResponse));
+      mock = fetchMock.mockResponse(JSON.stringify(sampleApiResponse));
     });
 
     it('renders a table', async () => {
@@ -81,9 +82,9 @@ describe('Flags', () => {
 
   describe('when an error is returned', () => {
     it('displays an alert', async () => {
-      const mock = fetch.mockReject(new Error('Error fetching targets'));
+      const mock = fetchMock.mockReject(new Error('Error fetching targets'));
 
-      let scrapePoolList: ReactWrapper;
+      let scrapePoolList: any;
       await act(async () => {
         scrapePoolList = mount(<ScrapePoolList {...defaultProps} />);
       });
diff --git a/web/ui/react-app/src/pages/targets/ScrapePoolList.tsx b/web/ui/react-app/src/pages/targets/ScrapePoolList.tsx
index cf6dfac42..3b3a5087f 100644
--- a/web/ui/react-app/src/pages/targets/ScrapePoolList.tsx
+++ b/web/ui/react-app/src/pages/targets/ScrapePoolList.tsx
@@ -23,7 +23,7 @@ const filterByHealth = ({ upCount, targets }: ScrapePool, { showHealthy, showUnh
 };
 
 const ScrapePoolList: FC<ScrapePoolListProps & PathPrefixProps> = ({ filter, pathPrefix }) => {
-  const { response, error } = useFetch(`${pathPrefix}/api/v1/targets?state=active`);
+  const { response, error } = useFetch<TargetsResponse>(`${pathPrefix}/api/v1/targets?state=active`);
 
   if (error) {
     return (
@@ -31,14 +31,14 @@ const ScrapePoolList: FC<ScrapePoolListProps & PathPrefixProps> = ({ filter, pat
         <strong>Error fetching targets:</strong> {error.message}
       </Alert>
     );
-  } else if (response && response.status !== 'success') {
+  } else if (response && response.status !== 'success' && response.status !== 'start fetching') {
     return (
       <Alert color="danger">
         <strong>Error fetching targets:</strong> {response.status}
       </Alert>
     );
   } else if (response && response.data) {
-    const { activeTargets } = response.data as TargetsResponse;
+    const { activeTargets } = response.data;
     const targetGroups = groupTargets(activeTargets);
     return (
       <>