img src is in array of object, using async await but images do not appear in react app

const [decks, setDecks] = useState();
const [loading, setLoading] = useState(true);

function getCardImage(decks){
        decks.map(async(deck)=>{
            deck.img = await MagicApi.getCardImage(deck.commander);
        })
        return decks;
    }
    
    useEffect(()=>{
        const gettingDecks = async (userInfo) => {
            const res = await UserApi.getDecks(userInfo);
            const res2 = await getCardImage(res);

            setDecks(res2);
            setLoading(false);
        }
        gettingDecks({id})
    },[]);

if(loading) return <div><h3>Fetching Your Commander Decks...</h3></div>
    
    console.log(decks)
        return(
        
            <Row>
                
                {decks.map(deck => {
                    return (
                    <Card key={crypto.randomUUID()}>
                            
                            <CardImg
                                alt="Card image cap"
                                src={deck.img}
                                style={{height: 300}}
                                top
                                width="50%"/>

                            <CardTitle><h3>{deck.commander}</h3></CardTitle>
                            
                            <CardBody>
                                <p>{deck.colors}</p>
                            </CardBody>
                            
                            <Button onClick={() => deleteDeck(deck)}>Delete</Button>
                        
                    </Card>
                    )
                })}
                
            </Row>
        )

when i look at the components in the dev tools it says my img src is undefined. but when i console.log before my return it shows the img url from the api.

been trying to google for a while and just cant find anything. I want the images to be shown on render.

Thank you in advance for any help!