function is being called but I dont know why - reactjs

Question

can someone tell me why in the world the drawCard() function runs 4 times as it should and then 52 more times the deck is 52 items long it must be related
but this
const initCard = ()=>{return deck.map((card,index)=>{return index<4 && drawCard(index%2===0?'player':'dealer')})}
so I don't know why does it happen
here is the full component
import Box from '#mui/material/Box';
import { useEffect, useRef, useState } from 'react';
import Card from '../components/Card'
import {styles} from '../visuals/Styles'
import { drawCardAnimation } from '../visuals/Animations'
function Gamepage() {
const [deck, setDeck] = useState([]);
/*let dealerHand=[];
let playerHand=[];*/
const [dealerHand, setDealerHand] = useState([]);
const [playerHand, setPlayerHand] = useState([]);
const [screenState, setScreenState] = useState('placeBet')
const first = useRef(true) //in order to prevent the effect of react strict we use ref to keep alive the first var which tells us if the useEffect hasnt been executed yes
useEffect(()=>
{
if(first.current){
first.current =false;
getDeck();
}
},[]);
const getDeck = async () =>{
const res = await fetch('http://localhost:5000/deck/shuffled');
const data = await res.json();
setDeck(data);
}
const initCard = ()=>{return deck.map((card,index)=>{return index<4 && drawCard(index%2===0?'player':'dealer')})}
const countCards = (hand)=>{
let res=0;
return {"cardsCount":hand.map(({suit,number,imgPath})=>{ return number }).sort((a, b) => b-a).map((value)=>{
if(value ===1 && res+11 <= 21)
res +=11;
else
res+=value;
return res
})[hand.length-1], "isBusted": res<=21 ? false:true};
}
const isBlackJack = (hand)=>{
return hand.length === 2 && countCards(hand).cardsCount === 21
}
const isPlayerWon= ()=>{
isBlackJack(playerHand) && console.log("BLACK JACK !");
return isBlackJack(playerHand) || (!countCards(playerHand).isBusted && countCards(dealerHand).isBusted) || (countCards(playerHand).cardsCount>=countCards(dealerHand).cardsCount && !countCards(playerHand).isBusted)
}
const drawToDealer = ()=>{
while(countCards(dealerHand).cardsCount<17){
drawCard('dealer')}
}
const drawCard = (target) =>
{
console.log("drawn");
let index = dealerHand.length + playerHand.length;
if(deck[index]&& target==='dealer' && !dealerHand.includes(deck[index]))
{
//dealerHand.push(deck[index])
setDealerHand((prev)=>[...prev, deck[index]])
}
else if(deck[index]&& target==='player'&& !playerHand.includes(deck[index]))
{
//playerHand.push(deck[index]);
setPlayerHand((prev)=>[...prev, deck[index]])
}
return deck[index]&&
<Card
key={index}
stl={index===1?styles.firstDealerCard:styles.card}
cardImg={( target==='dealer'&&dealerHand.length===1)?'upsidedownCard':deck[index].imgPath}
animation={drawCardAnimation(target==='dealer'?dealerHand.length-1:playerHand.length-1,target)}/>;
}
return (
<div>
<Box sx={styles.box}>
{/*TODO find out why functions inside onClick does not work
and make the end game prompt on screen
*/}
<Card stl={styles.deck} cardImg={'upsidedownCard'} />
{
(screenState==='placeBet')?
<img src={require('../assets/btnPlaceBet.png')} alt='' style={styles.btnPlaceBet} onClick={()=>setScreenState('gameStart')} />
:initCard()
}
{
screenState==='gameStart' && <img src={require('../assets/btnHit.png')} alt='' style={styles.btnHit} onClick={()=>{ drawCard('player'); console.log(playerHand);}} />
}
{
screenState==='gameStart' && <img src={require('../assets/btnStand.png')} alt='' style={styles.btnStand} onClick={()=>{ setScreenState('dilearsTurn')}} />
}
{
screenState==='gameStart' && <img src={require('../assets/btnDouble.png')} alt='' style={styles.btnDouble} onClick={()=>{ console.log('money is doubled'); drawCard('player'); /*console.log(playerHand);*/;setScreenState('dilearsTurn')}} />
}
{
screenState==='dilearsTurn' && <Card stl={styles.revealedCard} cardImg={dealerHand[0].imgPath} />
}
{
screenState==='dilearsTurn' && drawToDealer()
}
{
screenState==='dilearsTurn' && console.log(dealerHand.length)
}
{
screenState==='dilearsTurn' &&console.log(isPlayerWon() ?
`player wins ${countCards(playerHand).cardsCount} and dealer ${countCards(dealerHand).cardsCount} ${countCards(dealerHand).isBusted ? 'dealer busted':''}`
:
`dealer wins ${countCards(dealerHand).cardsCount} and player ${countCards(playerHand).cardsCount} ${countCards(playerHand).isBusted ? 'player busted':''}`)
}
{screenState==='dilearsTurn' && setTimeout(()=>{
console.log('game ended');
setTimeout(()=>{
setScreenState('placeBet')
},2000);
},3000)}
</Box>
</div>
)
}
export default Gamepage