React-beautiful-dnd: lazy loaded component keeps falling back to suspense when dragged

Question

I have a react component that dynamically loads a widget component using react lazy, with the component path passed as a prop.

It renders fine, but when I drag it, the component flickers between its Suspense fallback and the fully rendered component. How can I prevent the Suspense fallback from being shown while dragging?

The draggable list looks like this:

    <DragDropContext
      onDragEnd={result => {
        console.log(result);
        reorder({ result, previousData: dashboard.data });
      }}
    >
      <Title title={`Dashboard`} />
      <Droppable droppableId={"dashboard"}>
        {(
          provided
          // snapshot
        ) => {
          return (
            <div
              {...provided.droppableProps}
              ref={provided.innerRef}
              style={{
                display: "flex",
                flexDirection: "column"
              }}
            >
              {Array.isArray(dashboardItems.data) && dashboardItems.data.length > 0 ? (
                dashboardItems.data.map((item: any, index: number) => {
                  return (
                    <Draggable key={item.id} draggableId={item.id} index={index}>
                      {(provided, snapshot) => {
                        return (
                          <div ref={provided.innerRef} {...provided.draggableProps}>
                            <WidgetCard item={item} dragHandleProps={provided.dragHandleProps} />
                            {!snapshot.isDragging && <AddWidgetControl />}
                          </div>
                        );
                      }}
                    </Draggable>
                  );
                })
              ) : (
                <Button
                  onClick={() =>
                    addDashboardItem.mutate({
                      index: 0,
                      dashboardItem: widgets.overview
                    })
                  }
                >
                  <Typography variant="body2">Add</Typography>
                </Button>
              )}
              {provided.placeholder}
            </div>
          );
        }}
      </Droppable>
    </DragDropContext>

and the WidgetCard component that conditionally renders the widgets using lazy looks like this:

const WidgetCard = ({
  item,
  dragHandleProps
}: {
  item: DashboardItemEntity,
  dragHandleProps?: any
}) => {
  {...}
  const renderLoader = () => <p>Loading</p>;
  const WidgetComponent = lazy(() => import(`../${item.component}`));
  {...}
  return (
  {...}
    <CardContent sx={{ marginTop: 0, paddingTop: 0 }}>
      {/* {description} */}
      <Box sx={{ marginLeft: 2 }}>
        <Suspense fallback={renderLoader()}>
          <WidgetComponent item={item} />
        </Suspense>
      </Box>
    </CardContent>
  {...}
  );
};