React Hooks - Invalid Hook Call

I am getting an error

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:1. You might have mismatching versions of React and the renderer (such as React DOM)2. You might be breaking the Rules of Hooks3. You might have more than one copy of React in the same app

This is my hook useParking:

import { Strings } from "..";import { get } from "../HTTPProvider";import { Lot } from ".";import { Moment } from "moment";import L from "leaflet";interface ApiResponse {  id: string;  fields: Lot;  createdTime: Moment | string;}const { apiUrl, apiKey } = Strings;const [error, setError] = useState(false);const getParkingLots = (setParkingLots: (l: Lot[]) => void) => {  get<{ records: ApiResponse[] }>(`${apiUrl}Parking%20Lots`, { apiKey })    .then((response) => {      console.log(response);      const data: Lot[] = [];      response.data.records.forEach((record) => {        const lat = record.fields.latitude;        const lon = record.fields.longitude;        if (lat && lon) record.fields.coordinates = L.latLng([lat, lon]);        data.push(record.fields);      });      setParkingLots(data);    })    .catch((error) => setError(error));  console.log(error);};export const useParkingLot = (): Lot[] => {  const [parkingLots, setParkingLots] = useState<Lot[]>([]);  useEffect(() => {    getParkingLots(setParkingLots);  }, [parkingLots]);  return parkingLots;};

I am trying to use the hook in my MainTabs component here:

import {  IonTabs,  IonTabBar,  IonTabButton,  IonIcon,  IonLabel,  IonRouterOutlet,} from "@ionic/react";import { map, business, calendarOutline, carOutline } from "ionicons/icons";import { Route, Redirect } from "react-router";import { CampusMap, Events, Buildings, ParkingLots } from "../../pages";import { useFakeEvent } from "../../DataProviders";import { useBuilding } from "../../DataProviders";import { useParkingLot } from "../../DataProviders";export const MainTabs: React.FC = () => {  const buildings = useBuilding();  const parkingLots = useParkingLot();  const [events, setEvents] = useState(useFakeEvent());  const [showName, setShowName] = useState(true);  const toggleName = () => {    console.log("resetName called");    setShowName(false);    return setTimeout(() => {      setShowName(true);    });  };  return (<IonTabs><IonRouterOutlet><Route path="/:tab(Events)" render={() => <Events />} exact={true} /><Route          path="/:tab(Map)"          render={() => (<CampusMap              buildings={buildings}              showName={showName}              parkingLots={parkingLots}              events={events}            />          )}          exact={true}        /><Route          path="/:tab(BuildingList)"          render={() => <Buildings buildings={buildings} />}          exact={true}        /><Route          path="/:tab(ParkingLotList)"          render={() => <ParkingLots parkingLots={parkingLots} />}          exact={true}        /><Route exact path="/" render={() => <Redirect to="/Map" />} /></IonRouterOutlet><IonTabBar slot="bottom"><IonTabButton tab="Map" href="/Map" onClick={toggleName}><IonIcon icon={map} /><IonLabel>Map</IonLabel></IonTabButton><IonTabButton tab="BuildingList" href="/BuildingList"><IonIcon icon={business} /><IonLabel>Buildings</IonLabel></IonTabButton><IonTabButton tab="Events" href="/Events"><IonIcon icon={calendarOutline} /><IonLabel>Events</IonLabel></IonTabButton><IonTabButton tab="ParkingList" href="/ParkingLotList"><IonIcon icon={carOutline} /><IonLabel>Parking Lots</IonLabel></IonTabButton></IonTabBar></IonTabs>  );};

I have checked my code against the Rules of Hook documentation and it doesn't seem like I am breaking any. I have also checked my dependencies and they all check out. So I'm not sure why I'm getting the error. Can anyone see what I am doing wrong here?