Python Dash app with excel-like feature to select column elements with dropdown

Question

I am writing a dash app with following inputs like below:-

So far I've written the code as below:-

from dash import Dash, dcc, html, Input, Output, dash_table
import dash
from dash.dependencies import Input, Output, State
import dash
import pandas as pd
import dash_bootstrap_components as dbc
import io
import base64
import dash_renderer

def parse_contents(contents, filename):
    # content_type, content_string = contents.split(',')
    content_type, content_string = contents.split(',')
    decoded = base64.b64decode(content_string)
    df1 = pd.read_excel(io.BytesIO(decoded), sheet_name='Sheet1')
    df2 = pd.read_excel(io.BytesIO(decoded), sheet_name='Sheet2')
    return df1, df2

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([
    dbc.Row(
        dbc.Col(html.H1("Container Vulnerability Risk Rating Calculator",
                        className='text-center text-primary'),
                width=12)
    ),
    dbc.Row([
    dcc.Upload(
        id='upload-data',
        children=html.Div([
            'Drag and Drop or ',
            html.A('Select Files')
        ]),
        style={
            'width': '30%',
            'height': '40px',
            'lineHeight': '40px',
            'borderWidth': '1px',
            'borderStyle': 'dashed',
            'borderRadius': '5px',
            'textAlign': 'center',
            'margin': '0px'
        },
        multiple=False
       )]
    ),
    dbc.Row([
        dbc.Col([
            dash_table.DataTable(
                id='no-dropdown', 
                fill_width=False,
                columns=[
                    {'id': 'Microservices', 'name': 'Microservices'}
                ],
                css=[ {"selector": ".Select-menu-outer", "rule": "display : block !important"} ],
                style_cell={'textAlign': 'left'},
        editable=False,
        )
        ], width=5
        ),
        dbc.Col([
            dash_table.DataTable(
            id='with-dropdown',
            fill_width=False,
            css=[ {"selector": ".Select-menu-outer", "rule": "display : block !important"} ],
            # style_cell={'textAlign': 'left'},
            columns=[
                    {'id': 'Hosting Environment', 'name': 'Hosting Environment', 'presentation': 'dropdown'},
                    {'id': 'Complexities', 'name': 'Complexities', 'presentation': 'dropdown'},
                    {'id': 'Criticality', 'name': 'Criticality', 'presentation': 'dropdown'}
            ],
            editable=False,
            )
        ], width=5
        )
    ]
    )
    ], fluid=True
)

@app.callback(
               [
               Output('no-dropdown', "data"),
               Output('with-dropdown', 'dropdown'),
               Output('with-dropdown', 'data')
               ],
               Input('upload-data', 'contents'),
               Input('upload-data', 'filename')
)
def load_data(contents, filename):
    if contents is not None:
        # contents = contents[0]
        dff1, dff2 = parse_contents(contents, filename)
        dropdown={
            'Hosting Environment': {
                'options': [
                    {'label': i, 'value': i} for i in dff2['Hosting Environment']
                ]
            },
            'Complexities': {
                'options': [
                    {'label': i, 'value': i} for i in dff2['Complexities']
                ]
            },
            'Criticality': {
                'options': [
                    {'label': i, 'value': i} for i in dff2['Criticality']
                ]
            }
            }
        # print(dff['Hosting Environment'].unique())
        return dff1['Microservices'].to_frame().to_dict('records'), dropdown, dff2[['Hosting Environment', 'Complexities', 'Criticality']].to_dict('records')
    else:
        # print(type([{}]))
        return [{}], {}, [{}]

if __name__ == '__main__':
    app.run_server(debug=True)

This program renders the Layout where the Microservices column renders fine as it has to be a static column but "Hosting Environment" and other columns highlighted in Yellow, should display a dropdown so that user can select various options.

I first thought that it's due to a bug in Bootstrap, which is well documented. but even after including the workaround code, this still doesn't work.

Any help would be greatly appreciated.