Next.js 11 — вызов API Axios срабатывает 2 раза при загрузке страницы

Я пытался перенести CRA React.js в приложение Next.js SSR, я перешел специально на Next.js 11, так как у меня есть некоторые пакеты, которые поддерживают только Next.js 11, поскольку мое приложение CRA работает отлично, но когда я переместил все файлы проекта в Next.js 11, все мои вызовы API запускаются 2 раза, когда я посещаю страницу, я использую реакцию 16 и axios для получения данных из моего бэкэнда, пожалуйста, помогите мне решить эту проблему:

Вот пример кода:

в страницах/test/index.js

"use client"

import React from 'react';
import Test from '../../src/components/test';

const Asdf = () => {
    return ( 
        <Test />
     );
}
 
export default Asdf;

вот компонент:

"use client"

import Axios from 'axios';
import React, { useEffect, useState } from 'react';

const Test = () => {

    const [data, setData] = useState([])

    useEffect(() => {
        Axios.get('https://dummyjson.com/products/')
        .then(res => setData(res))
    }, [])

    return ( 
        <>
           test page
        </>
     );
}

export default Test;

На вкладке «Сеть» вы можете заметить 4 запроса, 2 — предполетные и еще 2 инициируются:

Есть ли способ предотвратить это или что я делаю неправильно, пожалуйста, дайте мне знать! Заранее спасибо.