Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Getting warning: Warning: Can't perform a React state update on an unmounted component

I have a hidden div. I have a dropdown. When value is selected from the dropdown, the selected card is added inside the body.

app.layout = dbc.Container(
    [
        Navbar(app),
        dcc.Dropdown(className='my-2', options=[
            {'label': 'A', 'value': 'A'},
            {'label': 'B', 'value': 'b'},
            {'label': 'C', 'value': 'c'}
        ], id='main-app-dropdown', multi=True),
        html.Div([
            A(app),
           B(app),
           C(app)
        ], id='source-container', className='d-none'),
        html.Div([], id='drag-container'),
    ], id='app-container')

app.clientside_callback(
    """
    function( dropdown_value, children, children_source) {
        const triggered = dash_clientside.callback_context.triggered.map(t => t.prop_id);

        if(triggered[0].split('.')[0] === 'main-app-dropdown'){
            children_source = children_source.concat(children);
            children= [];
            const ids_to_be_added = [];
            const dropdown_value_set = new Set(dropdown_value);
            
            for(let i=0; i<children_source.length; i++){
                if (dropdown_value_set.has(children_source[i]['props']['id'])){
                    ids_to_be_added.push(i);
                    }
            }
            
            for(let i=ids_to_be_added.length-1; i>=0; i--){
                const child = children_source.splice(ids_to_be_added[i], 1)[0];
                children.push(child);
            }
            
            return [children, children_source];
        }
    }
    """,
    [Output('drag-container', 'children'),
     Output('source-container', 'children')],
     Input('main-app-dropdown', 'value'),
    [State('drag-container', 'children'),
     State('source-container', 'children')],
    prevent_initial_call=True
)

I am getting the following error

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in s (created by s)
    in s (created by s)
    in div (created by s)
    in s (created by s)
    in s (created by s)
    in s (created by c)
    in Suspense (created by c)
    in c (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by Context.Consumer)
    in Unknown (created by BaseTreeContainer)
    in div (created by i)
    in i (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by Context.Consumer)
    in Unknown (created by BaseTreeContainer)
    in div (created by CardBody)
    in CardBody (created by Kn)
    in Kn (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by Context.Consumer)
    in Unknown (created by BaseTreeContainer)
    in div (created by t)
    in t (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by Context.Consumer)
    in Unknown (created by BaseTreeContainer)
    in div (created by Card)
    in Card (created by Fn)
    in Fn (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by Context.Consumer)
    in Unknown (created by BaseTreeContainer)