Reactjs – Next.js 11 – Axios api call triggering 2 times when page loads

I have been trying to migrate a React.js CRA to Next.js SSR Application, I moved specifically to Next.js 11 as I have some package deps which support only up Next.js 11, as my CRA application is working perfect, but when I moved all my project files to Next.js 11, all my API calls are triggering 2 times when I visit the page, I’m using react 16 and axios to fetch data from my backend, please help me to fix this issue :

Here is sample code :

in pages/test/index.js

"use client"

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

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

here is the component :

"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;

In network tab, you can notice 4 request, 2 are preflight and rest 2 calls being triggered :

Is there anyways to prevent it or what I’m doing wrong, please let me know! Thanks in advance.