Pinning a particular element using a drag and drop library in React

I am migrating from react-beautiful-dnd to dnd-kit which does not have customization to pin a particular HTML element and the others we can drag and drop.

Like in this image I can drag the Drag Me Item 2 but it can't go above Pinned Item 1.I want the Pinned Item 1 to remain fixed and it should not rearrange itself according to the other items if I drag them above it. It should always be at the 1st position.

With dnd-kit we have a disabled example like above but we still can drag 2 above 1 despite 1 being disabled.

enter image description here

My codesandbox. I was trying to keep the first card with Clauderic always pinned to the 1st position.

How can I solve this using dnd-kit or any other drag and drop library in React?

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum