Problme using dcc.Dropdown and dcc.Interval at the same time

Dash Python
1

Hello, I have built an app where both dcc.Dropdown and dcc.Interval are in use. My intention is to update the figures if I change the dcc.Dropdown values, if nothing is changed, figures should be updated after the designated interval. However, if I change values from dropdown the figures are not changing, they are being updated (according to the dropdown values) only after the designated interval. My code looks like the following-

# app layout
app.layout = html.Div(children = [
            html.H1("Forex Tracker", style ={'textAlign':'center'}),
            html.Div([
            html.H3("From Currency", style = {'paddingRight':'30px'}),
            dcc.Dropdown(
                id = "FromCurrency",
                options = [{'label':i, 'value':i} for i in curcode],
                value = curcode[curcode.index("EUR")], clearable=False, 
                style = {'fontsize':24, 'width': 75}
            )
            ], style = {'display':'inline-block'}), 
            html.Div([
            html.H3("To Currency"),
            dcc.Dropdown (
                id = "ToCurrency",
                options = [{'label':i, 'value':i} for i in curcode],
                value = curcode[curcode.index("USD")], clearable=False,
                style ={'fontsize':24, 'width':75}
            )
            ], style = {'display':'inline-block'}),
            html.Div([
                html.Button(id = 'submit-button',
                           n_clicks = 0,
                           children = 'View',
                           style = {'fontSize': 20, 'marginLeft':'20px'})
            ], style = {'display':'inline-block'}),
            dcc.Graph(id = 'forex'), 
            dcc.Interval(
            id='interval-component',
            interval=60*1000, # in milliseconds
            n_intervals=0
        )
])

# app functions
@app.callback([Output(component_id='forex', component_property='figure')],
              [Input('submit-button', 'n_clicks'),
              Input('interval-component', 'n_intervals')],
             [State(component_id='FromCurrency', component_property='value'),
             State(component_id = "ToCurrency", component_property = 'value')])


def RealTimeCurrencyExchangeRate(n_clicks, n_intervals, from_currency, to_currency) :
    
    # now get the time series plot
    ts = TimeSeries(key="HUJ3ZZZOFB3IY9NE",output_format = "pandas")
    time_data,metadata = ts.get_intraday(symbol = from_currency+to_currency ,interval= "1min" , outputsize = "compact")
    
    #candleplot = go.Candlestick(x = time_data.index, open = time_data["1. open"], high = time_data["2. high"], low = time_data["3. low"], close = time_data["4. close"])
    time_plot = go.Scatter(x = time_data.index, y = time_data["4. close"], marker = dict(color = '#17becf'))
    layout = go.Layout(title = "[Intraday Plot]"+ " " + from_currency + "/"+ to_currency + " (Last 100 Time Points)")
    data = [time_plot]
    fig_time = go.Figure(data=data, layout=layout)
    return (fig_time)

The error I am getting is -

ValueError: Thank you for using Alpha Vantage! Our standard API call frequency is 5 calls per minute and 500 calls per day. Please visit Premium API Key | Alpha Vantage if you would like to target a higher API call frequency.

I am sure that I am not calling more than 5 times. And if I remove the dcc.Interval part from the app the drop-down menu works perfectly.

Help and guidance would be highly appreciated.