Refactor

web/src/components/common/Link.tsx

@@ -0,0 +1,13 @@
+import { LinkProps, Link as MuiLink } from "@mui/material";
+import { Link as RouterLink } from "react-router-dom";
+
+/**
+ * MUI `<Link>` with React Router's `<Link>` as base component.
+ *
+ * Helps with imports as the two components are exported with the same name.
+ */
+const Link = (props: LinkProps<typeof RouterLink>) => (
+  <MuiLink {...props} component={RouterLink} />
+);
+
+export default Link;

web/src/components/map/SystemNode.tsx

@@ -1,6 +1,7 @@
-import { Box, Link, Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { Handle, Position } from "@xyflow/react";
-import { Link as RouterLink } from "react-router-dom";
+
+import Link from "../common/Link";
 import { SystemNodeData } from "./data/map-flow-types";
 
 type SystemNodeProps = {
@@ -30,9 +31,7 @@ const SystemNode = ({ data }: SystemNodeProps) => {
       <Handle type="target" position={Position.Top} style={{ opacity: 0 }} />
 
       {to ? (
-        <Link component={RouterLink} to={to}>
-          {name || systemName}
-        </Link>
+        <Link to={to}>{name || systemName}</Link>
       ) : (
         <Typography>{name || systemName}</Typography>
       )}