To contextualize, I have a trip that has for attributes points of interest that are assigned to it and are sorted by a rank field that allows us to display them in a desired order.

I have a problem, I set up a drag and drop system on my table of points of interest but when I move a cell it can have the same rank as the cell to which it is moved. This is not possible for us, I would like to know if there is a solution to make it impossible that two cells have the same rank or that 2 ranks with the same value are updated.

See the screen for the table :

My code to update a rank :

const { mutate: changeRank, isSuccess: changeRankSuccess } = useMutation(
async ({ pointTrip, rank }) => {
  let url = `http://localhost:443/api/pointTrip/${pointTrip}`;
  await axios
    .put(url, { rank })
    .then((res) => {})
    .catch((err) => {
      console.log(err);
    });
},
{
  onSuccess: () => {
    queryClient.invalidateQueries(queryKey);
  },
}

My code for change the rank on drag end :

const handleDragEnd = (result) => {

if(!result.destination) {
  return;
}
let tempPoi = [...trip.pointsOfInterest];
let [selectedRow] = tempPoi.splice(result.source.index, 1);
changeRank({pointTrip: selectedRow.PointTrip.id, rank: result.destination.index + 1});

Can you help me ?