Synchronise and dynamically changing dropdowns

I currently have a Dash app with multiple tabs containing dropdowns that are synchronized and hence always contain the same value. I have used the following method to synchronise the dropdowns:

I also have updated the options of another dropdown depending on the selection made within the first dropdown. This is documented in part3 of the tutorial under “Chained Callbacks”:

https://dash.plot.ly/getting-started-part-2

As an example I have created a demo app that essentially has a country and city dropdown on the first tab, and exactly the same on the second tab. This is just like the tutorial above but with both dropdowns being synchronised across the tabs. I have no problem synchronizing the dropdowns, but where I am struggling is selecting the value of the city dropdown when a country is selected. I.e. when ‘America’ is selected in the country dropdown, ‘New York’ should automatically be selected in the city dropdown. Essentially I need to combine the following callbacks into one:

@app.callback(
              Output('cities-dropdown', 'value'),
              [Input('tabs', 'value')],
              [State('dropdown-cache', 'data')])
def synchronize_dropdowns(_, cache):
    return cache


@app.callback(
    Output('cities-dropdown', 'value'),
    [Input('cities-dropdown', 'options')])
def set_cities_value(available_options):
    return available_options[0]['value']

I would also have the same callback for the city dropdown on the second tab.