Plotly mapbox scattermapbox and choroplethmapbox not rendering data / polygon geometries

I have a geoDataFrame with valid geometries and I use __geo_interface__ to create feature collections object which is passed to geojson property. I am attempting to overlay choropleth on scattermapbox.

Reference doc: https://plotly.com/python-api-reference/generated/plotly.graph_objects.Choroplethmapbox.html

import pandas as pd
import numpy as np
import geopandas as gpd
import dash
from dash.dependencies import Input, Output, State


df = pd.DataFrame({
               'Name': ['a','b','c'],
               'Lat': [32.86807500, 32.87950000, 32.80295000],
               'Long': [-96.68116000, -96.73237500, -96.95544000],
               'ws': [50, 45, 53]
              })

url = 'https://drive.google.com/file/d/1BnITg4z7_u3bQolnLJ08huiEMP-aManK/view?usp=sharing' 

dfc = pd.read_csv('')

# Convert to GeoDataFrame
gdfc = gpd.GeoDataFrame(dfc, geometry='tract_geom')

MAPBOX_KEY = "xxxxx"

layout = html.Div([
                    dcc.Graph(id="map-graph"),
                    html.div(id="dummy-div"
                 ])

@application.callback([
                       Output("map-graph", "figure"),
                      ],
                      [
                       Input("dummy-div", "value"),
                      ],
                     )
def update_map(dummy):

    s = gdfc['Home_Value'].astype(float)

    label = "Median Home Value"

    data = []

    data.append({

                    "type": "scattermapbox",
                    "lat": df['Lat'],
                    "lon": df['Long'],
                    "name": "Location",
                    "hovertext": df['Name'],
                    "showlegend": False,
                    "hoverinfo": "text",
                    "mode": "markers",
                    "clickmode": "event+select",
                    "marker": {
                        "autocolorscale": False,
                        "showscale":True,
                        "symbol": "circle",
                        "size": 9,
                        "opacity": 0.8,
                        "color": df['col1'],
                        "colorscale": "YlOrRd",
                        "cmin": df['col1'].min(),
                        "cmax": df['col1'].max(),
                        "colorbar":dict(
                                        title= 'Up',
                                        orientation= 'v',
                                        side= 'left',
                                        showticklabels=True,
                                        
                                       )
                        }
                 }
         )

         data.append({

                        "type": "choroplethmapbox",
                        "geojson": gdfc.__geo_interface__,
                        "locations": gdfc['tract_ce'],
                        "z": s,
                        "featureidkey": "properties.tract_ce",
                        "hovertext": gdfc['lsad_name'],
                        "autocolorscale":False,
                        "colorscale":"Portland",
                        "colorbar":dict(
                                        title = dict(text=label,
                                                     font=dict(size=12)
                                                    ),
                                        orientation = 'v',
                                        x= -0.15,
                                        xanchor= "left",
                                        y= 0,
                                        yanchor= "bottom",
                                        showticklabels=True,
                                        thickness= 20,
                                        tickformatstops=dict(dtickrange=[0,10]),
                                        titleside= 'top',
                                        ticks= 'outside',
                                        font = dict(size=12)
                                       ),
                        "zmin": s.min(),
                        "zmax": s.max(),
                        "marker_line_width": 0,
                        "opacity": 0.2,
                        "labels": label,
                        "title": "Choropleth Map"

                     }
            )

 
layout = {

             "autosize": True,
             "hovermode": "closest",
             "mapbox": {

                 "accesstoken": MAPBOX_KEY,
                 "bearing": 0,
                 "center": {
                     "lat": layout_lat,
                     "lon": layout_lon
                 },
                 "pitch": 0,
                 "zoom": zoom,
                 "style": "outdoors",

             },

             "margin": {
                "r": 0,
                "t": 0,
                "l": 0,
                "b": 0,
                "pad": 0
            }
}

return({"data": data, "layout": layout})

I don't see any errors in logs, I see this error in the console.

async-plotlyjs.js:2 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'type')
    at u (async-plotlyjs.js:2:1955039)
    at Object.extractTraceFeature (async-plotlyjs.js:2:1955666)
    at convert (async-plotlyjs.js:2:2553505)
    at e.exports [as plot] (async-plotlyjs.js:2:2557613)
    at b.updateData (async-plotlyjs.js:2:2332258)
    at async-plotlyjs.js:2:2330778

from Plotly mapbox scattermapbox and choroplethmapbox not rendering data / polygon geometries