Dash is not rendering updated component properties on web page on trigger of duplicate callback outputs

I am using two callbacks to update the same outputs. The first time, on page load, I am using a dummy hidden div to update (initialize) multiple outputs while the second callback is prevented from initial update.

When user selects a value after page load, I want to update some of the initialized outputs with some of the previously initialized outputs as inputs. Here is a snippet of my app below:

import dash
import dash_bootstrap_components as dbc
from dash import dcc, html, dash_table, State, ctx, no_update
from dash.dependencies import Input, Output
from django_plotly_dash import DjangoDash
import plotly.express as px
import pandas as pd
from collections import defaultdict

app = DjangoDash('analytics_dashboard')

#callback on page load
    Output("prod-name", "children"),
    Output("metric-filter", "value"),
    Output("dynamic-fig", "figure"),
    Input("filter-hidden", "value"),
def update_with_preference(value):
    if value == 'A':
        preferences = pd.read_csv(cache_path+'/user_preference.csv')
        user_preferences = preferences[preferences['username']==curr_user]
        user_prod_choice, user_metric_choice = user_preferences['product'].values[0], user_preferences['metric'].values[0]
        fig_data = page_data[['Month', 'Count']].groupby(['Month']).sum().reset_index()
        x = 'Month'
        y = 'Count'
        fig = generate_charts(fig_data, x_axis=x, y_axis=y, chart_type='bar')
        return user_prod_choice, user_metric_choice, fig

        raise PreventUpdate

# #interactive callbacks
    Output("dynamic-fig", "figure", allow_duplicate=True),
    Output("prod-name", "children", allow_duplicate=True),
    Input("metric-filter", "value"), prevent_initial_call=True)
def update_chart(metric_filter):

    filtered_data = page_data[page_data['product']==metric_filter]

    fig_data = filtered_data[['Month', 'Count']].groupby(['Month']).sum().reset_index()

    fig = generate_charts(fig_data, x_axis='Month', y_axis='Count', chart_type='bar')

    return prod_name_display, fig
        raise PreventUpdate

app.layout = html.Div(
        'min-width': '1280px', 
        'min-height': '651px',
        'font-family': 'verdana'},
        children = [

                            style = {
                            'width': '25%'
                            children = ['']

                    dcc.Graph(id='dynamic-fig', config={'displayModeBar': False}),
                    #hidden filter that will trigger callback on page load
                        style = {
                        'display': 'none',
                        children = 
                                id = 'filter-hidden',
                                options = ["A", "B"],
                                value = "A"),



When I print the output of the second callback the result is accurate and the figure is updated however dash fails to render the updated figure on the browser and no exception is thrown. Please any guidance on how to correct this is appreciated.