Adding scatter map to choropleth, both with colours

Hi, I am trying to plot a scatterplot + choropleth, both using some feature in the dataframe as color and in different color scale. The code looks like:

import plotly.express as px
df = yearly_incidence
fig = px.choropleth(df, locations='State_code',
                    color="IR", 
                    hover_name="Text", # column to add to hover information
                    color_continuous_scale="Viridis",
                    animation_frame='YEAR',
                    locationmode = 'USA-states',
                    scope="usa",
                    labels={'IR':'Incidence Rate'}
                   )
fig2 = px.scatter_geo(df, lat="lat", lon="lon",
                    size="POPULATION", # lifeExp is a column of gapminder
                    hover_name="Text_scatter", # column to add to hover information
                    color_continuous_scale="Cividis",
                    animation_frame='YEAR',
                    scope="usa",
                    opacity = 0.8,
                    labels={'sex_ratio':'Sex Ratio'},
                    color="sex_ratio"
                    )

fig.add_trace(fig2.data[0])
for i, frame in enumerate(fig.frames):
    fig.frames[i].data += (fig2.frames[i].data[0],)
fig.show()

(reference: How can I combine Choropleth and Scatter layer with animation frame in a plotly map - Plotly Python - Plotly Community Forum)

However, the color in scatter map seems to mask the colors in choropleth, generating this plot:

If I want both colors to present with two colorbars (presumably one in right and one in left), how should I revise the current code? Would appreciate your suggestions!