Link from react-router-dom element not working as expected inside useDraggable from dnd-kit-core. Colliding onClick listener (maybe)

Here is the situation:

I did a kanban board using dnd-kit and I put a there a link element from React Router that when is clicked loads the entire page instead updating the element.

Already checked the following aspects:

• Routes properly configured on App.tsx file
• BrowserRouter as parent element on main.tsx file
• Link element working behaviour out of the draggable element from dnd-core works as expected, which tells me that this is maybe an onClick crash between draggable element and Link element.

The following sources were consulted but didn’t clarify anything to me:

1. https://community.auth0.com/t/page-is-refreshing-every-time-a-new-route-is-clicked-react-spa/66597
   –> I’m using “to” prop instead href.
2. https://dev.to/alexanie_/link-component-in-react-router-3e83 –> I checked that reloadDocument is not set up.

Also the Link element works fine when I comment the {…listeners} part of my code.

This are the relevant parts of my code, any help is appreciated, also if you need aditional parts of my code I will be updating this question:

Draggable.tsx file:

interface DraggableUserProps {
  user: User;
}

const DraggableUser: React.FC<DraggableUserProps> = ({ user }) => {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id: user.id,
  });

  const style = {
    transform: `translate3d(${transform?.x}px, ${transform?.y}px, 0)`,
    border: "1px solid gray",
    borderRadius: "5px",
    padding: "10px",
    margin: "5px",
    backgroundColor: "white",
  };

  return (
    <div>
      <div
        ref={setNodeRef}
        style={style}
        {...listeners}
        {...attributes}
        onMouseEnter={(e) => {
          e.currentTarget.style.backgroundColor = "#8296a2";
          e.currentTarget
            .querySelectorAll("svg")
            .forEach((el: any) => (el.style.color = "white"));
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.backgroundColor = "white";
          e.currentTarget.querySelectorAll("svg").forEach((el: any) => {
            if (el.parentElement.className != "user-info") {
              el.style.color = "green";
            } else {
              el.style.color = "#8296a2";
            }
          });
          e.currentTarget.style.color = "black";
        }}
      >
        {/* Link element that works as expected */}
        <Link className="more-info" key={`useris${user.id}`} to="/user-details">
            <InfoIcon style={{ color: "#8296a2" }} className="user-info" />
        </Link>
        <div
          // onClick={(e) => e.stopPropagation()} Commented because didn't work
          style={{ display: "flex", justifyContent: "space-between" }}
        >
          <Link
            className="more-info"
            key={`useris${user.id}`}
            to="/user-details"
          >
            <InfoIcon style={{ color: "#8296a2" }} className="user-info" />
          </Link>
          {user.name}{" "}
          <a
            href={`https://wa.me/${user.phone}?text=${user.message.replace(
              " ",
              "%20"
            )}`}
          >
            <WhatsApp
              style={{ color: "green" }}
              onMouseEnter={(e) =>
                (e.currentTarget.style.transform = "scale(1.5)")
              }
              onMouseLeave={(e) =>
                (e.currentTarget.style.transform = "scale(1)")
              }
            />
          </a>
        </div>
      </div>
    </div>
  );
};

export default DraggableUser;

App.tsx file:

import React from "react";
import "bootstrap/dist/css/bootstrap.css";
import { Routes, Route } from "react-router-dom";
// import Routes from "./Routes.tsx"; Ver como importar
import "./App.css";
import ResponsiveAppBar from "./components/General/ResponsiveAppBar";
import myRoutes from "./components/api/myroutes";
import ProtectedRoute from "./components/api/protectedRoute";
import UserDetails from "./components/parts/crm/UserDetails";

function App() {
  return (
    <>
      <ResponsiveAppBar myItems={myRoutes} />
      <Routes>
        {myRoutes
          // .filter((elmnt) => elmnt.path !== "/user-details/:id")
          .map((elmnt) =>
            elmnt.protected ? (
              <Route
                key={elmnt.path}
                path={elmnt.path}
                element={<ProtectedRoute element={elmnt.element} />}
              />
            ) : (
              <Route
                key={elmnt.path}
                path={elmnt.path}
                element={elmnt.element}
              />
            )
          )}
        {/* <Route path="/user-details" element={<UserDetails />} /> */}
      </Routes>
    </>
  );
}

export default App;

Main.tsx file:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { BrowserRouter } from "react-router-dom";
import { AuthProvider } from './components/General/AuthProvider';

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <AuthProvider>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </AuthProvider>
  </React.StrictMode>
);

I would like to know if there is a way in which listeners from React Router Link element and dnd-kit useDraggable wouldn’t collide.

onClick={(e) => e.stopPropagation()}

didn’t work.

Thanks in advance guys.