Dropdown won't display

[TKELKAR123]

I am trying to create a dropdown feature inside a DataTable like this:

Unfortunately I cannot click on the dropdown button and then trigger the full menu showing. Instead I have to manually type in the value I want into the cell for the column.
For the working code example from the main website, here, I get this HTML upon inspection - the .Select-menu-outer in particular seems to be what we're after.

This doesn't appear to be a CSS override issue as I am unable to trigger this HTML by clicking on the dropdown menu button in the first place, and only have this HTML:

This is my sanitised code with dummy values put for the data variable in case this is causing the error (the data gets updated by a function on uploading a separate CSV that overwrites the data)

html.Div(id='output-table', style={'display': 'block'}, children=[ dash_table.DataTable( id='table', editable=True, columns=[ {"name": "Source", "id": "Source"}, {"name": "Target", "id": "Target"}, {"name": "# of Calls", "id": "# of Calls"}, {"name": "color", "id": "color", 'presentation': 'dropdown', "editable": True} ], data=[ {'Source': 'A', 'Target': 'B', '# of Calls': 10, 'color': 'green'}, {'Source': 'B', 'Target': 'C', '# of Calls': 5, 'color': 'red'}, {'Source': 'C', 'Target': 'D', '# of Calls': 2, 'color': 'darkgrey'} ], dropdown={ 'color': { 'options': [ {'label': 'Happy path', 'value': 'green'}, {'label': 'Unhappy path', 'value': 'red'}, {'label': 'Neutral path', 'value': 'darkgrey'} ] } }, )

Any help on what is causing this?