Почему рендерится бесконечное количество раз?

import React from 'react'
import { MapContainer,  TileLayer, Marker, Popup} from 'react-leaflet'
import UserMarkers from './UserMarkers'
import axios from 'axios'
import { useState, useEffect } from 'react';
 
 
 
export default function Map(){
    const markersSrc = 'https://reqres.in/api/users?page=1'
    const [markerPins, setMarkerPins] = useState([]);
    const pos = [51.505, -0.09]
 
 
    useEffect(() => {
        axios.get(markersSrc).then( 
            (res) => setMarkerPins( res.data.data ) 
            )
    })
     
        return(
            <MapContainer center={pos} zoom={13} scrollWheelZoom={true} attributionControl={false} >
                <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Marker position={pos}>
                <Popup>
                    A pretty CSS3 popup. <br /> Easily customizable.
                    < a href='https://www.yandex.ru/'>Яндекс</ a>
                </Popup>
                </Marker>
                <UserMarkers mPins={ markerPins }/>
            </MapContainer>   
        )
 
}

import React from 'react'
import MyMarker from './MyMarker'
 
export default function UserMarkers({mPins}){
 
        return (
            mPins.map( (el) => ( <MyMarker mark={el} key={el.id}/> ) )
        )  
}

import React from 'react'
import { Marker, Popup } from 'react-leaflet'
 
export default function MyMarker({ mark, key }) {
 
            return (
                <Marker position={ [51.505 + mark.id, -0.09] }>
                    <Popup>
                        {console.log(mark.id)}
                        {mark.id} <br/>
                        {mark.email} <br/>
                        < a href='https://www.yandex.ru/'>Яндекс</ a>
                    </Popup>
                </Marker>
            )
}

const [markerPins, setMarkerPins] = useState([]);

useEffect(() => {
        axios.get(markersSrc).then( 
            (res) => setMarkerPins( res.data.data ) 
            )
    })

<UserMarkers mPins={ markerPins }/>

useEffect(() => {
    axios.get(markersSrc).then( 
        (res) => setMarkerPins( res.data.data ) 
    )
}, [])

const url = "..."
export const getMarkerData = () => axios.get(url)