How to display the selected rows from Dash Table in HTML.Div in Python Script

Question

I have a Dash table that allows users to select certain rows from the table. Once the users select the rows, I'd like to display the selected data in a nice table format in HTML.Div. My current code runs well without any error but if I open the website, I still don't see the table. Could anyone tell me what part of the callback is wrong?

#Create table
dash_table.DataTable(
                    id="my_table",
                    columns=[
                            {"name": i, "id": i} for i in pd_df.columns
                              ],
                    data=pd_df.to_dict('records'),
                    filter_action="native",
                    sort_action="native",
                    style_table={
                                "overflowX": "scroll",
                                                      },
                   row_selectable="multi",
                                                            
 )


# HTML Components
html.Div(
     [
   html.P("Table Hearder"),
   html.Div(id="table-holder"),

  ]

)


@app.callback(
    Output("table-holder", "children"), 
    [Input("my_table", "rows"),
    Input("my_table", "selected_row_indices")]
)
def create_table(rows,selected_row_indices):
    selected_rows=[rows[i] for i in selected_row_indices]
    selected_rows_df=pd.DataFrame(selected_rows)
    final_table =  dbc.Table.from_dataframe(selected_rows_df, striped=True, bordered=True, hover=True)
    return final_table