I've just started learning frontend development using React following this tutorial. All is well until I've come to the props & state learning section.

In this section, I was supposed to build a meme generator page. Everything went well, I followed as instructed by the tutorial. However, when I clicked the button to change the meme image, it didn't worked. The image stayed the same as the initial image (with initial image URL value/state), even though my code didn't differ so much from what I've seen in the tutorial.

Here's my code for my meme generator component:

import React from 'react'
import './style.css'
import memesData from "./constants/MemeDB"

function Meme() {

    const [meme, setMeme] = React.useState({
        topText: "",
        bottomText: "",
        randomImage: "https://i.imgflip.com/30b1gx.jpg",
        imageAlt: "Drake Hotline Bling"
    })

    const [allMemeImage, setAllMemeImage] = React.useState(memesData)
    
    function getNewMeme() {
        const memesArray = allMemeImage.data.memes
        const randomNumber = Math.floor(Math.random() * memesArray.length)
        const url = memesArray[randomNumber].url
        const name = memesArray[randomNumber].name
        setMeme(prevMeme => ({
            ...prevMeme,
            randomImage: url,
            imageAlt: name
        }))
    }

    return (
        <main>
            <form className='form'>
                <input
                    type="text"
                    className='form--input'
                    placeholder='Top text'
                />
                <input
                    type="text"
                    className='form--input'
                    placeholder='Bottom text'
                />
                <button onClick={getNewMeme} className='form--button'>Get a new meme image 🖼</button>
            </form>
            <img src={meme.randomImage} alt={meme.imageAlt} className='meme-image' />
        </main>
    )
}


export default Meme

For additional information, I build the page locally using Microsoft VSCode, instead of Scrimba, through the npx create-react-app command.

I tried to add console.log(randomNumber) and console.log(url) inside the getNewMeme function to make sure if the values changed if I clicked the button. Then, I've found out that those values actually changed. However, each time I clicked the button, the values of the randomNumber and the url are only displayed on the console for a split second before the console automatically was cleared again. Also sometimes, on the page, when I clicked the button, I could see a glimpse of the meme image changed before reverted back to the initial image/state. What is the problem here?

I'm sorry if I couldn't describe the problem correctly.