Почему говорит что хук не в функциональном компоненте?

Question

[lookingfor2]

Вот компонент

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 */

Вот ошибка
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 the same app

Answer 1

[WbICHA]

Потому что он не в функциональном компоненте?

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