I am using this right now, need to add a condition in such a way that whenever the getCartCount is 0 it should show image as bag_empty instead of bag and when the cart count is more than 0 it should show bag
<Badge count={getCartCount()}>
<img
className="bag__img"
src={bag}
alt=""
onClick={user ? handleOpenBag : handleDynamicLink}
onMouseOver={() => setbag(hoverbag)}
onMouseOut={() => setbag(cart)}
/>
</Badge>
You could use a ternary operator like below, assuming that you have your empty bag image in your public folder.
<Badge count={getCartCount()}>
<img
className="bag__img"
src={getCartCount()>0 ? bag : "/emty-bag-goes-here.png"}
alt=""
onClick={user ? handleOpenBag : handleDynamicLink}
onMouseOver={() => setbag(hoverbag)}
onMouseOut={() => setbag(cart)}
/>
</Badge>