How to solve an error for a change in the order of Hooks called by CryptoExchange?

This is my component:

import { useEffect, useState } from "react";
import { Col, Row, Space, Select } from "antd";
import styles from "./CryptoExchange.module.css";
import bitcoin from "../../../assets/Bitcoin-3.svg";
import Image from "next/image";
import { DUMMY_TOKENS } from "@/src/api/api";
import { ICrypto } from "@/src/models/tokens";
import useTranslation from "next-translate/useTranslation";
import { useQuery } from "@tanstack/react-query";
import numeral from "numeral";
import Api from "@/src/api/real-api";
const numFormat = "0,0.00";
const crypto = "crypto";
const CryptoExchange = () => {
const [selectedToken, setSelectedToken] = useState<ICrypto>(DUMMY_TOKENS[0]);
const [currency, setCurrency] = useState<string>("USD");
const [price, setPrice] = useState(0);
const [high_24h, setHigh_24h] = useState(0);
const [low_24h, setLow_24h] = useState(0);
const [volume_24h, setVolume_24h] = useState(0);
const [price_24h, setPrice_24h] = useState(0);
const { data, isError, isLoading, error } = useQuery(
[crypto],
Api.fetchTokens
);
useEffect(() => {
if (!isLoading && !isError && data) {
exchangeHandler(currency, selectedToken);
}
}, [currency, selectedToken, data, isError, isLoading]);
const exchangeHandler = (currency: string, token: ICrypto) => {
if (currency === "USD") {
setPrice(+token.tokenStat.price * 1);
setPrice_24h(+token.tokenStat.price_24h * 1);
setHigh_24h(+token.tokenStat.high_24h * 1);
setLow_24h(+token.tokenStat.low_24h * 1);
setVolume_24h(+token.tokenStat.volume_24h * 1);
} else if (currency === "EUR") {
setPrice(+token.tokenStat.price * 0.92);
setPrice_24h(+token.tokenStat.price_24h * 0.92);
setHigh_24h(+token.tokenStat.high_24h * 0.92);
setLow_24h(+token.tokenStat.low_24h * 0.92);
setVolume_24h(+token.tokenStat.volume_24h * 0.92);
} else if (currency === "RSD") {
setPrice(+token.tokenStat.price * 107.66);
setPrice_24h(+token.tokenStat.price_24h * 107.66);
setHigh_24h(+token.tokenStat.high_24h * 107.66);
setLow_24h(+token.tokenStat.low_24h * 107.66);
setVolume_24h(+token.tokenStat.volume_24h * 107.66);
}
};
if (isLoading) return <h2>Loading...</h2>;
if (isError)
return (
<>
<h2>Something went wrong...</h2>
<p>{error.toString()}</p>
</>
);
const { t } = useTranslation("common");
const tokensSelectOptions = data.map((el) => {
return (
<Select.Option key={el.id} value={JSON.stringify(el)} label={el.name}>
{el.name}
</Select.Option>
);
});
const currencySelectOptions = [
<Select.Option
value="USD"
label={`${selectedToken.symbol}/USD`}
key={`${selectedToken.symbol}/USD`}
>
{`${selectedToken.symbol}/USD`}
</Select.Option>,
<Select.Option
value="EUR"
label={`${selectedToken.symbol}/EUR`}
key={`${selectedToken.symbol}/EUR`}
>
{`${selectedToken.symbol}/EUR`}
</Select.Option>,
<Select.Option
value="RSD"
label={`${selectedToken.symbol}/RSD`}
key={`${selectedToken.symbol}/RSD`}
>
{`${selectedToken.symbol}/RSD`}
</Select.Option>,
];
const handleSelectedToken = (value: any) => {
const token = value && JSON.parse(value.value);
setSelectedToken(token);
};
return (
<div>
<Row className={styles.gutterRow}>
<Col md={19} sm={19} xs={15} className={styles.gutterCol}>
<div className={styles.select}>
<Image src={bitcoin} alt="bitcoin" className={styles.image} />
<Space wrap>
<Select
defaultValue={{
value: data[0].name,
label: data[0].name,
}}
labelInValue={true}
style={{ width: 100 }}
onChange={(value) => handleSelectedToken(value)}
>
{tokensSelectOptions}
</Select>
<Select
style={{ width: 100 }}
onChange={(value) => setCurrency(value.value)}
defaultValue={{
value: "USD",
label: `${selectedToken.symbol}/USD`,
}}
labelInValue={true}
>
{currencySelectOptions}
</Select>
</Space>
</div>
<div>
<p className={styles.orangeP}>
{numeral(price).format(numFormat)} {currency}
</p>
</div>
<div>
<div className={styles.changes}>
<p className={styles.orangeP}>
{numeral(price_24h).format(numFormat)}
</p>
<p className={styles.orangeP}>
{numeral(selectedToken.tokenStat.change_24h).format(numFormat)}
</p>
</div>
<h6>24h {t("exchange.changes")}</h6>
</div>
<div>
<p>{numeral(high_24h).format(numFormat)}</p>
<h6>24h {t("exchange.high")}</h6>
</div>
<div>
<p>{numeral(low_24h).format(numFormat)}</p>
<h6>24h {t("exchange.low")} </h6>
</div>
<div>
<p>{numeral(volume_24h).format(numFormat)}</p>
<h6>
24h {t("exchange.volume")}({selectedToken.symbol})
</h6>
</div>
</Col>
<Col md={1} sm={1} xs={2} offset={1}>
<button className={styles.btn}>{t("exchange.buy")}</button>
</Col>
<Col  md={2} sm={2} xs={5} offset={1}>
<button className={styles.btn}>{t("exchange.add")}</button>
</Col>
</Row>
</div>
);
};
export default CryptoExchange;

And I am getting this error in console:
Warning: React has detected a change in the order of Hooks called by CryptoExchange. This will lead to bugs and errors if not fixed.

How can I solve that error?

Thank you in advance.

I tried to change the order of Hooks, but I couldn't solve the problem.

The issue in your code is that you are conditionally returning a component before declaring all the hooks.

In React, it's important to maintain the order and consistency of hook calls across multiple renders of a component. If you return conditionally before declaring all the hooks, some of them may not be included in the component's state during a certain render, resulting in this error.

To resolve this issue, make sure that all hook calls are placed at the top level of your component, and that you declare them before any conditional returns.

Additionally, ensure that all returns are placed at the end of the function, rather than interspersed throughout the component.

By following these guidelines, you can avoid the error and ensure that all hooks are correctly part of the component's state.