How to add a if condition to rendering a JSX component

Question

I have a JSX component that renders a button. I am trying to render one button based on the value of productItem.OutOfStock.

This is what I think the code should look like, but the output is that the 'if else statements' are being written to the screen and not being processed, what can I do to fix this?

return (
        <div>
            <h1>{category.CategoryName}</h1>
            {category.Products.map((productItem,i) => (
                <>
                    <p key={productItem.ProductId}>{productItem.ProductName}</p>

                    if(productItem.OutOfStock == true){ 
                    <button
                        className="snipcart-add-item"
                        data-item-id={productItem.ProductId}
                        data-item-price={productItem.Price}
                        data-item-url={productItem.ProductUrl}
                        data-item-description={productItem.Description}
                        data-item-image={productItem.ProductImageUrl}
                        data-item-name={productItem.ProductName}
                        {...dynamicProps[i]}>
                        ADD TO CART £{productItem.Price} 
                    </button>
                    }
                    else {
                        <button
                            className="snipcart-add-item"
                            data-item-id={productItem.ProductId}
                            data-item-price={productItem.Price}
                            data-item-url={productItem.ProductUrl}
                            data-item-description={productItem.Description}
                            data-item-image={productItem.ProductImageUrl}
                            data-item-name={productItem.ProductName}
                            disabled="true"
                            {...dynamicProps[i]}>
                            Sorry Sold out £{productItem.Price}
                        </button>
                    }
                </>
            ))}
            
        </div>
    );