using button to increment divs in react

I am fairly new to React/Next and I had a quick question.

I am trying to create a button that will increment the number of divs in real time.

Here is my code:

import React from 'react'


const Clown = () => {

    const [clownCounter, setClownCounter] = React.useState(1);

    function addClown(event) {
        event.preventDefault();
    }
    
    return(
        <React.Fragment>
        <div>
            <form>
                 
                {Array.from({ length: clownCounter}, (_unused, index) => index + 1).map(
                    (clownIndex) => {
                        const clownid = `${clownIndex}`
                        return (
                        <div key={clownid } className="clown-box">
                            <label htmlFor={clownid }>Activity {clownIndex}</label>
                            <br />
                            <input type="text" onChange={(e)=> onChangeForm(e)} name={activityId} id={activityId} />
                            <br />
                        </div>
                        )
                    },
                )}
                <span className="clown-add">
                    <button onClick={addClown} onChange={() => { setClownCounter(clownCounter++) }}>Add Clown</button>
                </span>   
                <br />  
            </form>
        </div>
        </React.Fragment>
    )
}
export default Clown

As you can see the goal is to increase the amount of clown-box divs everytime the button is clicked. I think I am close but it is not currently working. Can anyone help?