I have a dashboard where I’m trying to create a dropdown list that is grouped by and ordered by a database field (CommodityGroup).

The dashboard declaration and callback function are as follows, the options list is created as expected but it is not accepted by the dropdown class.

app.layout = html.Div([
    html.H1('Commitment of Traders Dashboard', style={'text-align': 'center'}),
    html.Div([
        html.Div([
            html.Label('Reporting Entity Type:', style={'font-weight': 'bold'}),
            dcc.Dropdown(
                id='rep-ent-type-dropdown',
                options=[{'label': i, 'value': i} for i in pd.read_sql_query("SELECT DISTINCT REP_ENT_TYPE FROM DATA", create_connection())['REP_ENT_TYPE']],
                value=default_filters['REP_ENT_TYPE']
            )
        ], className='dropdown-container'),
        html.Div([
            html.Label('Reporting/Other Total:', style={'font-weight': 'bold'}),
            dcc.Dropdown(
                id='rr-other-tot-dropdown',
                options=[{'label': i, 'value': i} for i in pd.read_sql_query("SELECT DISTINCT RR_OTHER_TOT FROM DATA", create_connection())['RR_OTHER_TOT']],
                value=default_filters['RR_OTHER_TOT']
            )
        ], className='dropdown-container'),
        html.Div([
            html.Label('Product Code:', style={'font-weight': 'bold'}),
            dcc.Dropdown(
                id='product-code-dropdown'
            )
        ], className='dropdown-container'),
        html.Div([
            html.Label('Market Identifier Code (MIC):', style={'font-weight': 'bold'}),
            dcc.Dropdown(
                id='mic-dropdown',
                options=[{'label': i, 'value': i} for i in pd.read_sql_query("SELECT DISTINCT MIC FROM REPORT", create_connection())['MIC']],
                value=default_filters['MIC']
            )
        ], className='dropdown-container')
    ], className='dropdown-row'),
    html.Div([
        dcc.Graph(id='chart1'),
        dcc.Graph(id='chart2')
    ], className='chart-container')
], className='dashboard-container')

@app.callback(
    [Output('product-code-dropdown', 'options'),
    Output('product-code-dropdown','value')],
    Input('product-code-dropdown', 'value')
)
def update_product_code_options(value):
    conn = create_connection()
    query = """
        SELECT p.CommodityGroup, p.ProductCode, p.LongName
        FROM PRODUCT p
        JOIN REPORT r ON p.ProductCode = r.PRODUCT_ID
        GROUP BY p.CommodityGroup, p.ProductCode, p.LongName
        ORDER BY p.CommodityGroup, p.ProductCode
    """
    df = pd.read_sql_query(query, conn)
    conn.close()

    options = []
    for commodity_group, group_df in df.groupby('CommodityGroup'):
        group_options = [
            {'label': f"{row['ProductCode']} - {row['LongName']}", 'value': row['ProductCode']}
            for _, row in group_df.iterrows()
        ]
        options.append({'label': commodity_group, 'options': group_options})

    return options, value

The error that I get is as follows:

Invalid argument `options` passed into Dropdown with ID "product-code-dropdown".
Expected one of type [object].
Value provided: 
[
  {
    "label": "Environmentals",
    "options": [
      {
        "label": "FEUA - EEX EUA Future",
        "value": "FEUA"
      }
    ]
  },
  {
    "label": "Freight",
    "options": [
      {
        "label": "CPTM - EEX Baltic Capesize 5TC Freight Future",
        "value": "CPTM"
      },
      {
        "label": "PTCM - EEX Baltic Panamax 4TC Freight Future",
        "value": "PTCM"
      },
      {
        "label": "SPTM - EEX Baltic Supramax 10TC Freight Future",
        "value": "SPTM"
      }
    ]
  },
  {
    "label": "Natural Gas",
    "options": [
      {
        "label": "G0BM - EEX THE Natural Gas Month Future",
        "value": "G0BM"
      },
      {
        "label": "G3BM - EEX TTF Natural Gas Month Future",
        "value": "G3BM"
      },
      {
        "label": "G5BM - EEX PEG Natural Gas Month Future",
        "value": "G5BM"
      },
      {
        "label": "G8BM - EEX CEGH VTP Natural Gas Month Future",
        "value": "G8BM"
      },
      {
        "label": "GBBM - EEX ZTP Natural Gas Month Future",
        "value": "GBBM"
      },
      {
        "label": "GCBM - EEX PSV Natural Gas Month Future",
        "value": "GCBM"
      },
      {
        "label": "GEBM - EEX PVB Natural Gas Month Futures",
        "value": "GEBM"
      }
    ]
  },
  {
    "label": "Power",
    "options": [
      {
        "label": "ATBM - EEX Austrian Power Base Month Future",
        "value": "ATBM"
      },
      {
        "label": "DEBM - EEX German Power Base Month Future",
        "value": "DEBM"
      },
      {
        "label": "DEPM - EEX German Power Peak Month Future",
        "value": "DEPM"
      },
      {
        "label": "F7BM - EEX French Power Base Month Future",
        "value": "F7BM"
      },
      {
        "label": "F7PM - EEX French Power Peak Month Future",
        "value": "F7PM"
      },
      {
        "label": "F9BM - EEX-PXE Hungarian Power Base Month Future",
        "value": "F9BM"
      },
      {
        "label": "FBBM - EEX Nordic System Price Month Future",
        "value": "FBBM"
      },
      {
        "label": "FCBM - EEX Swiss Power Base Month Future",
        "value": "FCBM"
      },
      {
        "label": "FDBM - EEX Italian Power Base Month Future",
        "value": "FDBM"
      },
      {
        "label": "FDPM - EEX Italian Power Peak Month Future",
        "value": "FDPM"
      },
      {
        "label": "FEBM - EEX Spanish Power Base Month Future",
        "value": "FEBM"
      },
      {
        "label": "FXBM - EEX-PXE Czech Power Base Month Future",
        "value": "FXBM"
      },
      {
        "label": "Q0BM - EEX Dutch Power Base Month Future",
        "value": "Q0BM"
      }
    ]
  }
]

I guess I can see that I’m not passing a list of dictionaries properly but I can’t see how to change it and keep the effect that I want, which is to have a dropdown list that looks like this:

Environmentals
    FEUA - EEX EUA Future
Freight
    CPTM - EEX Baltic Capesize 5TC Freight Future
    PTCM - EEX Baltic Panamax 4TC Freight Future