react-native@0.63.4 | react@17.0.1 deduped invalid - Causing Invalid Hook Call

I'm making an android app in react native and get this error when using useState in a util file: Error

WARN Possible Unhandled Promise Rejection (id: 287):
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 Hooks
3. You might have more than one copy of React in the same app

Trying to fix the error I ran npm ls react, which resulted in me getting this:

mobile_app@1.0.0 C:\...\mobile_app
+-- @react-native-community/masked-view@0.1.10
| `-- react@17.0.1 deduped invalid
+-- @react-navigation/native@5.9.3
| +-- @react-navigation/core@5.15.2
| | `-- react@17.0.1 deduped
| `-- react@17.0.1 deduped
+-- @react-navigation/stack@5.14.3
| `-- react@17.0.1 deduped
+-- expo@40.0.1
| +-- expo-asset@8.2.1
| | `-- react@17.0.1 deduped
| +-- expo-error-recovery@1.4.0
| | `-- react@17.0.1 deduped
| +-- expo-file-system@9.3.0
| | `-- react@17.0.1 deduped
| +-- expo-font@8.4.0
| | `-- react@17.0.1 deduped
| +-- expo-keep-awake@8.4.0
| | `-- react@17.0.1 deduped
| +-- expo-linear-gradient@8.4.0
| | `-- react@17.0.1 deduped
| +-- expo-permissions@10.0.0
| | `-- react@17.0.1 deduped
| `-- expo-sqlite@8.5.0
|   `-- react@17.0.1 deduped
+-- react-dom@17.0.1
| `-- react@17.0.1 deduped
+-- react-native-eva-icons@1.3.1
| `-- react@17.0.1 deduped invalid
+-- react-native-reanimated@1.13.2
| `-- react@17.0.1 deduped
+-- react-native-safe-area-context@3.1.9
| `-- react@17.0.1 deduped
+-- react-native-screens@2.18.0
| `-- react@17.0.1 deduped
+-- react-native-svg@12.1.0 invalid
| `-- react@17.0.1 deduped
+-- react-native-web@0.15.0
| `-- react@17.0.1 deduped
+-- react-native@0.63.4
| +-- react@17.0.1 deduped invalid
| `-- use-subscription@1.5.1
|   `-- react@17.0.1 deduped
+-- react-test-renderer@16.13.1
| `-- react@17.0.1 deduped invalid
`-- react@17.0.1 invalid

npm ERR! code ELSPROBLEMS
npm ERR! invalid: react@17.0.1 C:\...\mobile_app\node_modules\react

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\...\AppData\Local\npm-cache\_logs\2021-03-02T12_38_31_428Z-debug.log

This is only a warning but when getting 1000+ in a minute, I am interested in stopping this from happening and correcting the invalid versions of react.

EDIT:

Below is the code I use to call the hook. util/wifiScanner.js

import React, {useState}  from 'react';

import PermissionsAndroid from "react-native";
import WifiManager from "react-native-wifi-reborn";


const requestFineLocationPermission = async () => {

    ....

};

export async function getBeacons(props){

    await requestFineLocationPermission();

    const [wifiList, setWifiList] = useState(/* initialValue */); // you may provide an initial value (optional, defaults to undefined)

    WifiManager.setEnabled(true);
    WifiManager.reScanAndLoadWifiList().then((data) => {
        // update the state here
        setWifiList(data);
    });
    return wifiList;
};

The function getBeacons is called on the main screen here: screens/mainscreen.js

import React, {useState}  from 'react';
import { StyleSheet, PermissionsAndroid, Linking, View, TouchableOpacity  } from 'react-native';
import { IndexPath, Layout, Text, Button, Select, SelectItem } from '@ui-kitten/components';
import { Icon } from 'react-native-eva-icons';

import {styles} from '../styles'
import WifiManager from "react-native-wifi-reborn";

import {getBeacons} from '../../util/wifiScanner';


const MainScreen = async ({navigation}) => {

    let list = await getBeacons(); // Currently throws {_U, _V, _W, _X} error

    return (

        <Layout style={styles.container}>

            ...

        </Layout>
    );
}

export default MainScreen;