Weird bug in React/Redux component that causes redirect?

On the homeScreen when you click a list of products, it goes the productScreen page with 1 product and its details. When I added the onClick handler and onChange handler to the button and qty select in the productScreen.js, it causes it so that every time you go to productScreen (/products/:id) it will automatically redirect to /cart.

productScreen.js

import Rating from '../components/Rating'
import { useParams, Link } from 'react-router-dom'
import { useSelector, useDispatch} from 'react-redux'
import { useEffect, useState } from 'react'
import { productDetailCreator } from '../state/actions/productActions'
import { addCartAction } from '../state/actions/cartActions'


const ProductScreen = (props) => {
    const { id } = useParams()
    const dispatch = useDispatch()
    const { loading, error, product } = useSelector(state => state.productDetail)

    // Load Product
    useEffect(() => {
        dispatch(productDetailCreator(id))
    }, [dispatch, id])

    const [qty, setQty] = useState(0)

    // Add to Cart Function
    const addToCartHandler = (id, qty) => {
        dispatch(addCartAction(id, qty))
        props.history.push('/cart')
    }

    return (
        <div className="max-w-5xl mx-auto my-36">
            <div className=" mt-8 p-2">
                <Link to="/" className="flex items-center text-gray-400 font-light">
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3 mr-1 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
                    </svg>
                    Back
                </Link>
            </div>
            { loading? (
                <h3>Loading...</h3>
            ) : error ? (
                <h3>{error}</h3>
            ) : (
                <div className="flex flex-col sm:flex-row items-center my-7 px-8 py-2">
                    <div className="p-5 sm:w-2/5">
                        <img className="" src={product.image} alt={product.name} />
                    </div>
                    <div className="flex flex-col sm:w-2/5 p-5">
                        <span>{product.name}</span>
                        <hr className="my-4"/>
                        <Rating product={product} />
                        <hr className="my-4"/>
                        <span>Price: ${product.price}</span>
                        <hr className="my-4"/>
                        <span>Description: {product.description}</span>
                    </div>
                    <div className="flex flex-col sm:w-1/5 p-5">
                        <span className="text-center">Price: ${product.price}</span>
                        <span className="text-center mt-1">Status: {product.countInStock > 0 ? 'In Stock' : 'Out of Stock'}</span>
                        <div className="px-4 qty-select">
                                        <label htmlFor="qty">Qty</label>
                                        <select onChange={(e) => setQty(e.target.value)} name="qty" value="1" >
                                            { [...Array(10).keys()].map(x => (
                                                <option value={x+1} key={x+1}>{x+1}</option>
                                            ))}
                                        </select>
                                    </div>
                        <button onClick={addToCartHandler(product._id, qty)} disabled={product.countInStock === 0} className="px-2 py-4 bg-pink-400 hover:bg-pink-300 hover:shadow-md text-white shadow-sm rounded-sm text-center my-4">Add to Cart</button>
                    </div>
                </div>
                )
            }
        </div>
            
    )
}

export default ProductScreen

What's extremely weird is, if you click the image on the home page it will go to cart. If you click the product name on the home page, it will ADD the item to cart and go to cart.

There is no difference in the link references for either image or product name. I have no idea what's causing this issue?

Homescreen > product.js

import Rating from './Rating'
import {Link} from 'react-router-dom'

const Product = ({product}) => {
    return (
        <div className="card rounded shadow flex md:flex-col items-center overflow-hidden ">
            <Link to={`/products/${product._id}`}>
                <img className="mx-4 my-1 h-60 md:h-50 py-2 object-contain" src={product.image} alt={product.name} />
            </Link>
            <div className="py-4 px-4 mx-4 md:mx-2">
                <Link to={`/products/${product._id}`} className="block h-28 font-light">{product.name}</Link>
                <span className="block text-lg mb-4 font-medium">${product.price.toFixed()}</span>
                <Rating product={product} />
                <button className="px-6 py-4 my-4 min-w-full bg-pink-400 hover:bg-pink-300 hover:shadow-md text-white shadow-sm rounded-sm block">Add to Cart</button>
            </div>
        </div>
    )
}

export default Product

All I know is if I get rid of the onClick on the Add to Cart button on productScreen.js, the redirect problem stops.