Black Lives Matter. Please consider donating to Black Girls Code today.

Reference Error - cannot find Id of callback-generated DatePickerRange

In a Dash layout, I’m generating a DateRangePicker with default values. In the code snippet below it is associated with id=‘date-picker-container’

html.Div([
            html.Div('Pick a coverage date range'),
            html.Div('(Default start = four weeks prior to latest date)'),
            html.Div([
                html.Div(
                    children=None,
                    **id='date-picker-container'**
                ),
                html.Button('Refresh Graph', 
                    id='refresh-graph-btn', 
                    style={
                        'float': 'right', 
                        'backgroundColor': colors['text']
                    }
                ),
                html.Button('Refresh Date', 
                    id='refresh-date-btn', 
                    style={
                        'float': 'right', 
                        'backgroundColor': colors['text']
                    }
                )
            ]),
        ]),

...

@app.callback(
     dash.dependencies.Output(**'date-picker-container'**, 'children'),
    [dash.dependencies.Input('refresh-graph-btn', 'n_clicks')]
)
def display_default_datepicker(n_clicks):
    return dcc.DatePickerRange(
                **id='date-picker-range',**
                min_date_allowed=min_date,
                max_date_allowed=max_date,
                start_date=min_date,
                end_date=max_date
            )

I am trying to reference the datepicker (id=‘date-picker-range’) as an input to a different callback

@app.callback(
    dash.dependencies.Output('coverage-graph', 'figure'),
    [dash.dependencies.Input('filter-subject', 'value'),
     dash.dependencies.Input('refresh-graph-btn', 'n_clicks')],
    [dash.dependencies.State(**'date-picker-range',** 'start_date'),
     dash.dependencies.State(**'date-picker-range',** 'end_date')]
)
def display_graph(s_value, n_clicks, start_date, end_date):
    tickvals_f = subject_list['yvalue']
    ticktext_f = subject_list['subject_id']
....

But I get the following Reference Error - It does not recognize the id ‘date-picker-range’

ReferenceError: An invalid input object was used in a State object of a Dash callback. The id of this object is date-picker-range and the property is start_date. The list of ids in the current layout is `[date-picker-container, refresh-graph-btn, refresh-date-btn, filter-subject, graph-container, coverage-graph]

If I directly instantiate that DatePickerRange in ‘date-picker-container’, it is recognized. If I let it be generated via a callbak, it does not. This is a very similar to the pattern I followed at

https://github.com/plotly/dash-recipes/blob/master/dash-update-datepicker-range.py

I can’t determine what I’m doing wrong. Any insight would be greatly appreciated.

Regards