«Ошибка: неверный вызов ловушки. Хуки могут вызываться только внутри тела компонента функции» при использовании useState

Question

Я получаю эту ошибку в моем компоненте useState (я полагаю), основываясь на этой трассировке стека:

    at resolveDispatcher (react.development.js:1590)
    at useState (react.development.js:1618)
    at GameTable (index.js:15)
    at Module../src/components/GameTable/index.js (index.js:83)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Module../src/components/Home/index.js (index.js:83)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Module../src/components/App/index.js (index.js:74)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Module../src/index.js (index.css?e32c:37)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object.1 (serviceWorker.js:137)
    at __webpack_require__ (bootstrap:785)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Я не понимаю, почему эта ошибка происходит, так как я использую хуки внутри функции, как говорится. Я проверил, что все мои зависимости обновлены, поэтому не должно быть конфликтов версий, как предлагает React, и у меня нет двух версий React в одном проекте. Итак, я предполагаю, что нарушаю какое-то правило хуков, но я не знаю, что именно, я делаю неправильно.

Мой компонент здесь:

import React, { useState, useEffect } from "react";
import { withFirebase } from "../Firebase";
import TableContainer from "@material-ui/core/TableContainer";
import makeStyles from "@material-ui/core/styles/makeStyles";
import withAuthorization from "../Session/withAuthorization";
import Paper from "@material-ui/core/Paper";
import withStyles from "@material-ui/core/styles/withStyles";
import Table from "@material-ui/core/Table";
import PropTypes from 'prop-types';
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableBody from "@material-ui/core/TableBody";

function GameTable(props) {
    const [loading, setLoading] = useState(false);
    const [games, setGames] = useState([]);

    const useStyles = makeStyles({
        table: {
            minWidth: 640,
        }
    });

    useEffect(() => {
       setLoading(true);

        props.firebase.games(props.firebase.auth().currentUser.uid).on('value', snapshot => {
            const gamesObject = snapshot.val();

            const gamesList = [];
            Object.keys(gamesObject).forEach((key) => {
                gamesList.push({[key]: gamesObject[key]})
            });

            setGames(gamesList);
            setLoading(false);
        });

        return function cleanup() {
            props.firebase.games().off();
        }
    });

    const classes = useStyles();

    return (
        <TableContainer component={Paper}>
            <Table className={classes.table}>
                <TableHead>
                    <TableRow>
                        <TableCell>Date</TableCell>
                        <TableCell>Opponent</TableCell>
                        <TableCell>Goals</TableCell>
                        <TableCell>Assists</TableCell>
                        <TableCell>Points</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {games.map(game => (
                        <TableRow key={game.date}>
                            <TableCell component="th" scope="row">
                                {game.date}
                            </TableCell>
                            <TableCell align="right">{game.opponent}</TableCell>
                            <TableCell align="right">{game.goals}</TableCell>
                            <TableCell align="right">{game.assists}</TableCell>
                            <TableCell align="right">{game.points}</TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </TableContainer>
    );
}

GameTable.propTypes = {
        classes: PropTypes.object.isRequired,
};

export default withAuthorization(withFirebase(GameTable()));