DCC Tooltip not working when figure has an object/categorical in the color attribute

Dash Python
1

I am using the dcc.Tooltip along with px.scatter_mapbox.

The tooltip works perfectly fine (everything is correctly labeled) when I pass a numerical feature in the color attribute of the scatter_mapbox.

However, when I change the color attribute to a categorical/object feature, the tooltip does not work properly on the map (i.e. all the data and labels are wrong)

SIMPLIFIED PIECE OF CODE WHERE IT WORKS:

# Map & Tooltip
dcc.Graph(id="map_graph_critical", clear_on_unhover=True),
dcc.Tooltip(id="graph-tooltip-critical")

# Output map
@callback(
    Output('map_graph_critical', 'figure'),
    Input('submit_button_critical', 'n_clicks'),

)
def update_chart(n_clicks):
    if n_clicks is None:
        px.set_mapbox_access_token(mapbox_access_token)
        df1 = df[df['Region'] != 'All']
        bins = [0, 12, 24, 1000000]
        labels = ["< 12 months", "12-24 months", "> 24 months"]
        df1['Expiration Date'] = pd.cut(df1['Months_remaining'], bins=bins, labels=labels, right=False)
        fig = px.scatter_mapbox(df1, lat='Latitude', lon='Longitude', color='Annual Rent', size='Rentable Area', hover_name='LeaseID')
 
        fig.update_traces(hoverinfo="none", hovertemplate=None)
        return fig

@callback(
    Output("graph-tooltip-critical", "show"),
    Output("graph-tooltip-critical", "bbox"),
    Output("graph-tooltip-critical", "children"),
    Input("map_graph_critical", "hoverData"),
    Input('submit_button_critical', 'n_clicks'),
)
def display_hover(hoverData, n_clicks):
    if hoverData is None:
        return False, dash.no_update, dash.no_update

    elif n_clicks is None:
        df1 = df[df['Region'] != 'All']
        pt = hoverData["points"][0]
        bbox = pt["bbox"]
        num = pt["pointNumber"]

        df_row = df1.iloc[num]
        lease_id = df_row['LeaseID']

        children = [
            html.Div([
                html.H2(f"{lease_id}", style={"color": "#015151", "overflow-wrap": "break-word", "fontSize": 20, "fontWeight": "bold"}),

            ])
        ]

SIMPLIFIED PIECE OF CODE WHERE IT DOES NOT WORK (EVERYTHING SAME AS BEFORE THE ONLY DIFFERENCE IS THIS LINE OF CODE WHEN GENERATING THE MAP; color=‘Expiration Date’ instead of ‘Annual Rent’):

fig = px.scatter_mapbox(df1, lat='Latitude', lon='Longitude', color='Expiration Date', size='Rentable Area', hover_name='LeaseID')

Can anyone please help pinpoint what I am doing wrong?