Why useEffect called Multiple times when axios is present inside

I am just now Learning React JS, stuck with the following issue
useEffect is called Multiple Times, even when state value is passed in Dependencies. How to fix it?

import axios from 'axios';
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom';

const ViewProfileUseEffect = () => {
    const [userList, setUserList] = useState([]);
    const naviagte = useNavigate();
    useEffect(() => {
        axios.get("http://localhost:4000/users").then((response) => {
            setUserList(response.data);
            console.log('I am inside useEffect');
        }).catch((error) => {
            alert("Something went wrong")
        })
    }, [userList]);
function handleProfile(id) {
        naviagte(`/profile/${id}`);
    }

    function deleteProfile(id) {
        axios.delete(`http://localhost:4000/users/${id}`).then((response) => {
            console.log(`Delete Response Data ${response.data}`);
        }).catch((error) => {
            alert("Something went Wrong");
        })
    }
    return (
        <>
            <h3>View Profile</h3>
            <div className='container' style={{ backgroundColor: 'bisque', width: '500px', padding: '20px', borderRadius: '5px' }}>
                <table className='table'>
                    <thead>
                        <tr>
                            <th scope='col'>UserName</th>
                            <th scope='col'>Email ID</th>
                            <th scope='col'>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {userList.map((user) => {
                            return (
                                <tr key={user.id}>
                                    <td>{user.userName}</td>
                                    <td>{user.userEmail}</td>
                                    <td>
                                        <button className="btn btn-warning" onClick={() => handleProfile(user.id)}>View Profile</button>
                                        <button className="btn btn-danger" onClick={() => deleteProfile(user.id)}>Delete Profile</button>
                                    </td>
                                </tr>
                            )
                        })}
                    </tbody>
                </table>
            </div>
        </>
    )
}

export default ViewProfileUseEffect

The Output I got

“I am inside useEffect” is coming in console multiple times endlessly

How to stop it?