Not able to change cards dynamically using react

[eight-bitguy]

export default class GamePage extends Page {
    constructor(props) {
        super(props);
        this.state = {
            cards: ['2D', '4D']
        };
    }

    async componentDidMount() {
        setTimeout(this.addCards, 1000);
    };

    addCards = () => this.setState({
        cards: ['2D', '4D', '2D', '4D']
    });

    render() {
        const cardsToRender = this.state.cards;

        return (
            <div className='row'>
                <div className="m-5 hand active-hand fan" data-fan={`spacing: 0.2; width: 180; radius: 850;`}>
                    {cardsToRender.map(card => <img className='card' src={`./Images/${card}.svg`} alt='hello'/>)}
                </div>
            </div>
        );
    }
}

For time 0 to 1 cards are rendered perfectly. But for time > 1, all cards just overlaps on each other.