Show Primefaces Datatable Selected Object To Dialog

Question

I am learning DataTable on PrimeFaces. When I practiced Selection, I got confused. My dialog won't show the information of selected object. Please help me figure it out. My DataTable

<h:form id="form">
        <div class="card">
            <h1 style="text-align: center">Products</h1>
            (...)
<p:dataTable id="productDT" var="product" value="#{Product.productList}"
                         stripedRows="true" showGridlines="true"
                         allowUnsorting="true" sortMode="single"
                         style="padding-inline: 50px"
                         rowKey="#{Product.id}" selection="#{Product.selectedProduct}"
                         rows="5" paginator="true"
                         paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                         paginatorPosition="bottom"
                         currentPageReportTemplate="{startRecord}-{endRecord} of {totalRecords} records"
                         rowsPerPageTemplate="5,10,{ShowAll|'All'}">
   <p:column selectionMode="single" style="text-align: center; width: 30px" exportable="false"/>

   <p:column headerText="ID" style="text-align: center;">
           <h:outputText value="#{product.id}"/>
   </p:column>

   <p:column headerText="Name" style="text-align: center;">
           <h:outputText value="#{product.name}"/>
   </p:column>

   <p:column headerText="Price" style="text-align: center;">
           <h:outputText value="#{product.price}">
                   <f:convertNumber currencySymbol="$" type="currency"/>
           </h:outputText>
   </p:column>

   <p:column style="width: 35px; text-align: center">
           <p:commandButton oncomplete="PF('addProduct').show()" icon="pi pi-pencil" title="View" styleClass="ui-button-info"/>
   </p:column>
   <f:facet name="footer">
           <p:commandButton process="productDT" update=":form:productDetail" icon="pi pi-search" value="View" oncomplete="PF('productDialog').show()"/>
   </f:facet>
</p:dataTable>
</div>

(...)
<p:dialog>
(...)
</p:dialog>
(...)
</h:form>

My Dialog

<p:dialog header="Product Info" widgetVar="productDialog" modal="true" showEffect="fade"
                  hideEffect="fade" resizable="false">
            <p:outputPanel id="productDetail" style="text-align:center;">
                <p:column rendered="#{not empty Product.selectedProduct}">
                    <div class="product">
                        <div class="product-grid-item card" style="margin-bottom: 0">
                            <div class="product-grid-item-content">
                                <p:graphicImage url="#{Product.selectedProduct.image}"/>
                                <div class="product-name">
                                    <h:outputText value="#{Product.selectedProduct.name}" />
                                </div>
                            </div>
                            <div class="product-grid-item-bottom">
                                <h:outputText value="#{Product.selectedProduct.price}"
                                              styleClass="product-price">
                                    <f:convertNumber currencySymbol="$" type="currency"/>
                                </h:outputText>
                            </div>
                        </div>
                    </div>
                </p:column>
            </p:outputPanel>
        </p:dialog>

My Bean

@ManagedBean(name="Product")
@ViewScope
public class FunctionProductBean {

    private Product selectedProduct;
    private List<Product> selectedProducts;

    public Product getSelectedProduct() {
        return selectedProduct;
    }

    public void setSelectedProduct(Product selectedProduct) {
        this.selectedProduct = selectedProduct;
    }

    public List<Product> getSelectedProducts() {
        return selectedProducts;
    }

    public void setSelectedProducts(List<Product> selectedProducts) {
        this.selectedProducts = selectedProducts;
    }

    private String id;
    private String name;
    private String image;
    private double price;
    private String catalogId;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getImage() {
        return image;
    }

    public void setImage(String image) {
        this.image = image;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    public String getCatalogId() {
        return catalogId;
    }

    public void setCatalogId(String catalogId) {
        this.catalogId = catalogId;
    }
...
}

Please help me figure out the problem. Because I am learning, if there are mistakes in my codes above, tell me how to improve it. Thanks.