When I was using dnd-kit and react-slick, there were some issues with transform

[hth520]

Parent component：

<DndContext onDragStart={onDragStart} onDragEnd={onhandleDragEnd} onDragMove={onDragMove}>
            <SortableContext
              items={doctorList.map((i) => i.id)}
              strategy={horizontalListSortingStrategy}
            >
              <Slider beforeChange={handleBeforeChange} ref={sliderRef} {...settings}>
                {doctorList?.map((item, index) => (
                  <PractitionerItem
                    key={item.id}
                    data={item}
                    index={index}
                    afterPunch={afterPunch}
                  />
                ))}
              </Slider>
            </SortableContext>
          </DndContext>

      Chilren compoent:

              <div
      ref={setNodeRef}
      {...attributes}
      style={{
        ...(transform
          ? {
              transform: `translate3d(${transform.x}px, 0, 0)`,
            }
          : {}),
        transition,
        position: 'relative',
        zIndex: isDragging ? '999' : 'auto',
      }}
      className={styles.practitionerItem}
    >
      <Badge size="default" count={index + 1} offset={[-10, 10]} className={styles.badge}>
        <CustomAvatar
          {...listeners}
          style={{ cursor: 'grab' }}
          className={cx(styles.avatar, data?.isPunchIn ? styles.border : null)}
          name={data?.name}
          gender={data?.gender}
        />
      </Badge>
      </div>

!!: I investigated and found that the transform calculation of the react-slick component was triggered when dragging the element, leading to conflicts. So I controlled the react-slick component to dynamically set the transform attribute by starting and ending functions, which seemed to be unable to solve this flickering problem.