Use effect not working in without refreshing the page

Question

I am making a app using ionic-react. Calling a api in useEffect but api is not getting call.

import classes from './index.module.scss';
import React, { useEffect, useState } from 'react';
import { IonContent, IonPage } from '@ionic/react';
import { LoggedInHeader, WalletCard } from '../../components';
import { Stack } from '@mui/material';
import { wallet } from '../../apis';


interface WalletProps { };

export const Wallet = (props: WalletProps) => {

    const [walletHistory, setWalletHistory] = useState<any[]>([]);
    useEffect(() => {
        console.log("is this comingggggggggggggg")
        let data = {
            "user_id": localStorage.getItem("userid")
        }
        wallet(data)
        .then((response)=> {
            setWalletHistory(response.data.data)
        })
        .catch((error)=>{
            console.error("Getting error at auth: ", error);
        })
    }, [])

    return (
        <IonPage>
            <IonContent fullscreen>
                <LoggedInHeader />
                some content
            </IonContent>
        </IonPage>
    )
}

If i add a dependency in useeffect then api is calling infinite time. Wallet api calling file

instance.interceptors.request.use(function (config: AxiosRequestConfig) {
    const token = localStorage.getItem('usertoken') || '';
    if (token) {
        const headers: AxiosRequestHeaders = {
            Authorization: token
        };
        config.headers = headers;
    }
    return config;
});
export const wallet = (user_id:any) => instance({
    method: 'GET',
    url: `/customer/wallet_history`,
    data: user_id,
    responseType: 'json'
});

This is my api calling file and i am using axios instance