Drag and Drop Wrapper does not allow clicking components.

[lilac idol]

This is how i give data to the GenericComponent:

const tabData = [
    {
      value: 'workExperience',
      label: 'Työ',
      Component: (props) => (
        <GenericComponent
          data={props.resume.workexperiences}
          renderItem={renderWorkExperienceItem}
          ExperienceForm={WorkExperienceForm} // Pass the form for work experiences
          createExperience={createWorkExperience}
          updateSortOrder={updateWorkExperienceSortOrder}
          title="Work Experience"
          description="Manage your professional experiences."
        />
      ),
    },
...
]
return (
...
tabData.map...
<Component resume={resume} />
)

My renderWorkExperienceItem.tsx:

'use client';

export const renderWorkExperienceItem = (
  workExperience,
  provided: DraggableProvided,
  setSelectedItem,
) => {
  return (
    <div ref={provided.innerRef} {...provided.draggableProps}>
      <Group
        {...provided.dragHandleProps}
        py={'md '}
        onClick={() => setSelectedItem(workExperience)}
      >
        <IconGripVertical size="1.2rem" />
        <Group>
          <div style={{ cursor: 'pointer' }}>
            <Text fw={500}>{workExperience.company</Text>
          </div>
        </Group>
      </Group>
    </div>
  );
};

here is dragAndDropWrapper:

const DragAndDropWrapper = <T extends { id: number | string }>({
  items,
  renderItem,
  onDragEnd,
  setSelectedItem,
}: DragAndDropWrapperProps<T>) => (
  (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable-items" direction="vertical">
        {(provided) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {items.map((item, index) => (
              <Draggable
                key={item.id}
                draggableId={item.id.toString()}
                index={index}
              >
                {(provided) => renderItem(item, provided, setSelectedItem)}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  )
);

export default DragAndDropWrapper;

The thing with this is that i get it working without trying to make this refactoring, but it feels so stupid to write WorkeXperienceSection, EducationExperienceSection, LanguageSection. When i could have this one component that can do all the stuff instead.

I'm sorry this explanation might feel confusing.

But for example here is a working version from the workExperience, this is now the "hardCoded" versio which contains alot of repetition, because i need to do this same for education, language etc

So in short i'm trying to refactor my workExperience, educationExperience components to be one Generic component than can be used.

If u got this far i appreciate your patience! thank u🙏🏽