Как исправить NonExistentIdException при определении компонента в приложении-черточке

Question

У меня есть следующая схема для моего dash-приложения:

   home = [
        #KPI

        html.Div(
            id="one",
            className="row",

            children=[
                    html.P("Dash")
            ]
        ),

        html.Div(
            className ="row",
            children=[
                html.Div(style={"display": "inline-block"},
                    children="Select a Data Source",
                    className="title is-5"
                ),
                dcc.Dropdown(
                    id='dataSource_dropdown',
                    options=[
                        {'label': 'x', 'value': 'x'},
                        {'label': 'y', 'value': 'y'}
                    ],
                    multi=False,
                    value="x",
                    placeholder="Select a Data Source",
                    clearable=False,
                    searchable=False
                ) 
            ]
        )
    ]





    primaryResearch = [


                dcc.RadioItems(
                    id="radioSelection",
                    style={
                        "float": "left",
                        "padding-left": 50, 
                    },
                    options=[
                        {"label": "1", "value": 1},
                        {"label": "2", "value": 2},
                        {"label": "3", "value": 3}
                    ],
                    value=1
                )]



    '''
    ~~~~~~~~~~~~~~~~
    ~~ APP LAYOUT ~~
    ~~~~~~~~~~~~~~~~
    '''

    app = dash.Dash(__name__, external_stylesheets ["https://codepen.io/chriddyp/pen/bWLwgP.css"])
    app.css.config.serve_locally = True
    app.scripts.config.serve_locally = True


    app.layout = html.Div(

      className="container",     

      children = [
      # facilitate multi-page app
      dcc.Location(id="url", refresh=True),    

      # header
        html.Div(
            id="header",
            className="row",
            style={
                'background-color': 'rgb(10, 187, 189)'
            },
            children=[

                html.Div([
                        html.H1(
                            style={"display": "inline-block",
                                   "float":"right"},
                            children="360 Dashbaord"
                        )

                    ]
                )
            ]
        ),

        html.Br(),

        html.Div(
            id="div_graphs",
            children=dcc.Graph(
                    style={'display': 'none'}
            )
        ),

        html.Div(
            className ="row",
            children=[
                html.Div(style={"display": "inline-block"},
                    children="Select a Data Source",
                    className="title is-5"
                )

    #        **************Not Able to find the following id*************


    #                dcc.Dropdown(
    #                    id='dataSource_dropdown',
    #                    options=[
    #                        {'label': 'x', 'value': 'x'},
    #                        {'label': 'y Repository', 'value': 'y'}
    #                    ],
    #                    multi=False,
    #                    value="x",
    #                    placeholder="Select a Data Source",
    #                    clearable=False,
    #                    searchable=False
    #                ) 
            ]
        ),


        # buttons to pages
        html.Div(
            className="row",
            style={"margin-bottom": "20",
                   "margin-right":"50"},
            children=[
                dcc.Link(
                    id="home-button",
                    className="button",
                    href="/home",
                    children="Home"
                ),
                dcc.Link( 
                    id="primary-Research-button",
                    className="button",
                    href="/primaryResearch",
                    children="Primary Research"
                )
            ]
        ),

        html.Br(),


      # container for page content

      html.Div(
            id="page-content",
            className="row"
        )

     ]
    )


    @app.callback(Output("page-content", "children"),
             [Input("url", "pathname")])
    def show_page(pathname):
    if (pathname == "/home") or (pathname == "/"):
        return home
    if pathname == "/primaryResearch":
        return primaryResearch


    @app.callback(Output("div_graphs", "children"),
            [Input("dataSource_dropdown", "value")])
    def update_graph(dropdown_value):
     if dropdown_value == 'y' :
        return [
            html.Div(
                className='three columns',
                style={
                    'min-width': '24.5%',
                    'height': 'calc(100vh - 90px)',
                    'margin-top': '5px',

                    # Remove possibility to select the text for better UX
                    'user-select': 'none',
                    '-moz-user-select': 'none',
                    '-webkit-user-select': 'none',
                    '-ms-user-select': 'none'
                },
                children=[
                        html.H1("X")

                ])
            ]  

Теперь проблема в том, что при попытке получить доступ к компоненту, который является частью списка, я получаю следующее исключение:

NonExistentIdException
Attempting to assign a callback to the component with the id "dataSource_dropdown" but no components with id "dataSource_dropdown" exist in the app's layout.

Если я определю этот компонент вне списка, то есть как часть макета приложения, я смогу найти его и получить к нему доступ, но мне нужно определить различные представления в приложении.Есть мысли о том, почему это может происходить?

Кроме того, я считаю, что подобный фреймворк работает здесь , так что не знаю, что ломается в моем коде.