What's the difference between these two arrow functions?

I am building a website. Every time I click to a "product" I want it to be saved in a react hook. Why does my program collapse when I use function2?

const function1 = prod => () => {...} 

vs

const function2 = (prod) => {...}

const handlePurchase = prod => () => {
        setSelectedProduct(prod)
        history.push(`/product/?name=${prod.name}&id=${prod.id}`)
    }


    return (
        <>
            <h2 className="text-Header 1">Keep it Real Keep it Loco</h2>

            <ProductsContainer>
                {productsdb.map(prod => (
                    <div className="product" key={prod.id} onClick={handlePurchase(prod)}>
                        <img className="product-image" src={prod.img} alt={prod.name} />
                        <h2 className="product-name">{prod.name}</h2>
                        <h3 className="product-price">{'$' + prod.price}</h3>
                    </div>

                ))}
            </ProductsContainer>
        </>
    )
}

from Recent Questions - Stack Overflow https://ift.tt/2KTGQgp
https://ift.tt/eA8V8J