React beautiful dnd does some weird behavior of flickering

Question

When I try to drag the react beautiful dnd it just keeps on having an issue where it will take up unnecessary space or is weird and does not smoothly switch between categories

const ChannelMaincover = () => {
  const initialCategories = [
    {
      id: 'category-1',
      name: 'Text Channelsa',
      textChannels: [
        { id: 'text-channel-1', name: 'general' },
        { id: 'text-channel-2', name: 'random' },
        // ... add more text channels as needed
      ],
    },
    {
      id: 'category-2',
      name: 'Voice Channels',
      textChannels: [
        { id: 'text-channel-3', name: 'Discussion' },
        { id: 'text-channel-4', name: 'Meetup' },
        // ... add more text channels as needed
      ],
    },
    // ... add more categories as needed
  ];
  const [categories, setCategories] = useState(
    [
      {
        id: 'category-1',
        name: 'Text Channelsa',
        textChannels: [
          { id: 'text-channel-1', name: 'general' },
          { id: 'text-channel-2', name: 'random' },
          // ... add more text channels as needed
        ],
      },
      {
        id: 'category-3',
        name: 'Text Channelsa',
        textChannels: [
          { id: 'text-channel-3', name: 'general' },
          { id: 'text-channel-23', name: 'random' },
          // ... add more text channels as needed
        ],
      },
      {
        id: 'category-2',
        name: 'Voice Channels',
        textChannels: [
          { id: 'text-channel-1s', name: 'Discussion' },
          { id: 'text-channel-4', name: 'Meetup' },
          // ... add more text channels as needed
        ],
      },
      // ... add more categories as needed
    ]
  );
  

  const onDragEnd = result => {
    const { source, destination, draggableId, type } = result;
    console.log(result); // Add this line to debug

    // Do nothing if the item is dropped outside a droppable area
    if (!destination) {
      return;
    }
  
    // Handling reordering of categories
    if (type === 'DEFAULT') {
      const newCategories = [...categories];
      const [reorderedItem] = newCategories.splice(source.index, 1);
      newCategories.splice(destination.index, 0, reorderedItem);
  
      setCategories(newCategories);
    } 
    // Handling reordering of text channels within or across categories
    else if (type === 'textChannel') {
      const start = categories.find(category => category.id === source.droppableId);
      const finish = categories.find(category => category.id === destination.droppableId);
  
      // Moving within the same category
      if (start === finish) {
        const newChannels = Array.from(start.textChannels);
        const [reorderedChannel] = newChannels.splice(source.index, 1);
        newChannels.splice(destination.index, 0, reorderedChannel);
  
        const newCategory = { ...start, textChannels: newChannels };
        const updatedCategories = categories.map(category =>
          category.id === newCategory.id ? newCategory : category
        );
  
        setCategories(updatedCategories);
      }
      // Moving from one category to another
      else {
        const startChannels = Array.from(start.textChannels);
        const [removedChannel] = startChannels.splice(source.index, 1);
        const newStart = { ...start, textChannels: startChannels };
  
        const finishChannels = Array.from(finish.textChannels);
        finishChannels.splice(destination.index, 0, removedChannel);
        const newFinish = { ...finish, textChannels: finishChannels };
  
        const updatedCategories = categories.map(category =>
          category.id === newStart.id ? newStart :
          category.id === newFinish.id ? newFinish : category
        );
  
        setCategories(updatedCategories);
      }
    }
  };
  
  
  
  return (
    <Cover>
        <Servername>
            <div>
                <h4>Yash's server</h4>
            </div>
            <div className='drop'>
                <img src={dropdown} alt="" />
            </div>
        </Servername>
         <DragDropContext onDragEnd={onDragEnd}>
          {categories.map((category, index) => (
          <div className='Test'> 
          <Droppable key={category.id} droppableId={category.id}>
            {(provided) => (
              <div className='Dropable' ref={provided.innerRef} {...provided.droppableProps}>
                <Categories key={category.id} category={category} index={index} />
                {provided.placeholder}
               </div>
              )}
          </Droppable>

        </div>
        ))}
 
      </DragDropContext>
     </Cover>
  )
}

export default ChannelMaincover
 

and my categories component looks like this

 
const Categories = ({ category, index }) => {
     return (
        <Draggable key={category.id} draggableId={category.id} index={index} type="category">
        {(provided, snapshot) => (
          <Cover
            ref={provided.innerRef}
            {...provided.draggableProps}
            isDragging={snapshot.isDragging}
          >
            <Catagorysection>
              <div className='Firstdiv' {...provided.dragHandleProps}>
                <img src={down} alt="" />
                <p>{category.name}</p>
              </div>
              <img className='Plusbut' src={Smallplus} alt="" />
            </Catagorysection>
            <Droppable key={category.id} droppableId={category.id} type="textChannel">
              {(provided) => (
                <div ref={provided.innerRef} {...provided.droppableProps}>
                  {category.textChannels.map((channel, index) => (
                    <Textchannel key={channel.id} channel={channel} index={index} />
                  ))}
                  {provided.placeholder}
                </div>
              )}
            </Droppable>
            {provided.placeholder}
          </Cover>

        )}
      </Draggable>
    );
  };
  

export default Categories

 

Any help would be amazing https://youtu.be/LqN6FyeDV4s This is a youtube link showing the issue