Why does it say that the hook is not in a functional component?

Question

React

Here is the component

import React, {useState, useEffect, Fragment} from 'react';
const [OperationsList, setOperationsList] = useState([]);
import {apiGetOperationsLoan} from '../api/Api';
import TabBar from './TabBar.jsx';
import TabBarItem from './TabBarItem.jsx';


export default function App() {
    useEffect(() => {
        apiGetOperationsLoan()
            .then((response) => {
                setOperationsList(response.data);
            });
    })
    return (
        <Fragment>
            <div className="cabinet__history-title">
                <h1>
                    История операций
                </h1>
            </div>
            <TabBar>
                <TabBarItem label="Операции ">

                </TabBarItem>
                <TabBarItem label="Финансовые ">
                    <p>2</p>
                </TabBarItem>
                <TabBarItem label="Системные ">
                    <p>3</p>
                </TabBarItem>
                <TabBarItem label="Кредитный ">
                    <p>4</p>
                </TabBarItem>
            </TabBar>

        </Fragment>
    );
}
/* eslint-enable */

Here is the error
VM18001 react.development.js:1465 Uncaught 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 same app

Answer 1

Because it's not in a functional component?

import React, {useState, useEffect, Fragment} from 'react';
const [OperationsList, setOperationsList] = useState([]); // ← ← ←
import {apiGetOperationsLoan} from '../api/Api';