I am working on an anime project and using react-router first time. My problem is that I cannot redirect the user to another page that has anime details.

This is the main component that has anime images and their titles. When the user clicked the image, it has to direct to the anime details component which I cannot do it.

 <Container>
      <Row>
        {animes.map((data) => (
          <Col key={data.mal_id} sm={4}>
            <Link to="/anime-details/:mal_id">
              <Image
                src={data.images.jpg.large_image_url}
                alt={`This is ${data.title}`}
                style={{ height: "350px" }}
                className="mt-4"
                rounded
              />
            </Link>
            <p
              style={{ fontWeight: "bold", fontSize: "1.15rem" }}
              className="mt-2">
              {data.title}
            </p>
          </Col>
        ))}
      </Row>
    </Container>

This is the router in the index.js

const router = createBrowserRouter([
  {
    path: "/",
    element: <Main />,
    children: [
      {
        path: "anime-details/:mal_id",
        element: <AnimeDetails />,
        loader: async ({ request, params }) => {
          return axios(`/anime-details/${params.mal_id}`, {
            signal: request.signal,
          })
        },
      },
    ],
  },
])

Finally, this is the anime details page

import React from "react"

function AnimeDetails() {
  return <div>Anime Details</div>
}

export default AnimeDetails

Thanks in advance!