Callback function Error in hierarchical dash components

Dash Python
1

Hello! I hope all of you are doing fine. I have a specific use case in which I am using a dropdown in one of my pages named “multivariate-analysis” of the multipage dash application. The dropdown contains options for multiple chart types, such as Bar charts, Pie charts, etc. On selecting one of the chart types the callback function retrieves the layout function from another dash page and renders it.
This is the code from multivariate-analysis.py

import dash
import dash_bootstrap_components as dbc
from dash import callback, Input, Output, State, html, dcc

import plotly.express as px
import plotly.graph_objects as go
from plotly.subplots import make_subplots

import pandas as pd
import requests
import json

from .Charts.piechart import layout as pie_layout

dash.register_page(__name__)


def layout(**query_strings):
    print(type(query_strings))
    layout = html.Div(
        children=[
            html.Div(
                dcc.Input(value=f"{json.dumps(query_strings)}", id="input",
                          type="text",
                          placeholder="",
                          style={'marginRight': '10px', 'display': 'none'}
                          )
            ),
            html.Div(
                dcc.Dropdown(
                    id='dropdown',
                    options=[
                        {
                            "label": html.Span(
                                [
                                    html.I(className="bi bi-bar-chart-fill"),
                                    html.Span("Bar Chart", style={'font-size': 15, 'padding-left': 10}),
                                ], style={'align-items': 'center', 'justify-content': 'center'}
                            ),
                            "value": "Bar Chart",
                        },
                        {
                            "label": html.Span(
                                [
                                    html.I(className="bi bi-pie-chart"),
                                    html.Span("Pie Chart", style={'font-size': 15, 'padding-left': 10}),
                                ], style={'align-items': 'center', 'justify-content': 'center'}
                            ),
                            "value": "Pie Chart",
                        },
                    ],
                    style={"height": "50px", "width": "200px"}
                )
            ),
            html.Div(id="main-div"),
        ], style={
            "display": "flex",
            "flex": "flex-end"
        }
    )

    return layout


@callback(
    Output("main-div", "children", allow_duplicate=True),
    State("input", "value"),
    Input('dropdown', "value"),
    prevent_initial_call=True
)
def return_layout(query_strings, value):
    print('dropdown value', value)
    if value == "Pie Chart":
        component = pie_layout(query_strings)
        print(type(component))
        return component
    elif value == "Bar Chart":
        return "this is bar chart component"

This is the code of another page that I am trying to render named piechart.py:

def layout(query_strings):
        layout = html.Div([
                            html.Button("Add Dropdown", id="add-dropdown-button"),
                            html.Div(id="dropdown-container", children=[
                            ]),
                        ])
        return layout

@callback(
    Output("dropdown-container", "children", allow_duplicate=False),
    Input("add-dropdown-button", "n_clicks"),
    prevent_initial_call=True
)
def add_dropdown(n_clicks):
    if n_clicks is None:
        raise dash.exceptions.PreventUpdate
    new_dropdown_id = f"dropdown-{n_clicks}"
    print(n_clicks)
    new_dropdown = dcc.Dropdown(
        id=new_dropdown_id,
        options=[
            {"label": f"Option {n_clicks + 1}", "value": f"option-{n_clicks + 1}"}
        ],
        value=f"option-{n_clicks + 1}"
    )
    return [*dash.callback_context.outputs[0]['value'], new_dropdown]

On loading the page multivariate-analysis I am getting this error:
In the callback for output(s):
dynamic-dropdowns.children
Output 0 (dynamic-dropdowns.children) is already in use.
To resolve this, set allow_duplicate=True on
duplicate outputs, or combine the outputs into
one callback function, distinguishing the trigger
by using dash.callback_context if necessary.

I have tried everything and I think maybe this error is being raised due to the callbacks being in a nested order, i.e, the callback of multivariate-analysis is calling upon dash component (piechart) which also has its own callback