SetInterval “apilándolos” uno encima de otro

Estoy trabajando en este proyecto que utiliza setInterval y estoy teniendo un poco de dificultad en entender cómo funciona setInterval. El problema que tengo es que cada vez que llamo a setInterval, la función parece apilarse una encima de la otra, lo que resulta en que el objeto aparezca múltiples veces rápidamente. No estoy seguro de qué estoy haciendo mal en este caso. ¿Alguien podría ayudarme? Gracias.

const [hit, setHit] = useState(0)
const [count, setCount] = useState(0)
var timer = null
var funcCalls = 0
const hitSound = new Audio("/hit.wav")
useEffect(() => {
    timer = setInterval(moveSquare, 2000)
}, [])
function handleHit(){
    hitSound.play()
    setHit(hit+1)
    resetSquare()
}
function resetSquare(){
    clearInterval(timer)
    moveSquare()
    timer = setInterval(moveSquare, 2000)
}
function moveSquare(){
    const gameContainer = document.getElementById("game-container")
    const height = gameContainer.offsetHeight
    const width = gameContainer.offsetWidth
    const square = document.getElementById("square")
    square.style.top = (Math.random() * (height - 100)) + "px";
    square.style.left = (Math.random() * (width - 100)) + "px";
}
return (
    <>
    <section classname='game-section'>
        <div classname='counter'>
            {hit}
            {count}
        </div>
        <div classname='game-container' id="game-container">
            <div classname="square" id="square" onclick="{handleHit}"></div>
        </div>
    </section>

)