Не происходит переход на страницу по клику на Link

столкнулся со следующей проблемой: у меня есть элемент Card, представляющий собой карточку книги, в ней есть элемент Link с текстом "Подробнее". При клике на элемент должен происходить переход на страницу с подробным описанием книги: подгрузка данных через google books api, затем рендеринг. Но в моем случае переход не происходит, при этом url в поисковой строке меняется. В чем может быть проблема? Ниже прикреплю код компонента Card, компонента About, на который должен происходить переход и своего api. Заранее спасибо.

Компонент Card:

import React from "react";

import { Link, useLocation } from "react-router-dom";
import fake from "../../images/fakeCover.png";
import classes from "./Card.module.scss";

function Card({ id, author, title, cover }) {
  const location = useLocation();

  return (
    <div className={classes.card}>
      <img className={classes.top_image} src={cover || fake} alt="cover" />
      <div className={classes.content}>
        <div className={classes.description}>
          <span className={classes.author_font}>{author}</span>
          <span className={classes.book_font}>{title}</span>
        </div>

        <div className={classes.buttons}>
          <div className={classes.add_btn}>
            <span className={classes.inner_font}>В избранное</span>
          </div>
          <Link
            className={classes.about}
            to={`/${id}`}
            state={{ from: location }}
          >
            <span className={classes.inner_font}>Подробнее</span>
          </Link>
        </div>
      </div>
    </div>
  );
}

export default Card;

Компонент About:

import React from "react";
import { Link, useLocation, useParams } from "react-router-dom";
import { useGetBooksInfoQuery } from "../api/booksApi";
import Header from "../components/Header/Header";
import Loader from "../components/Loader/Loader";

function About() {
  const { id } = useParams();
  const { data, isLoading, error } = useGetBooksInfoQuery(id);
  const location = useLocation();
  if (isLoading) {
    return <Loader />;
  }

  if (error) {
    return <div>Возникла ошибка: {error.message}</div>;
  }

  if (data) {
    return (
      <div>
        <Header />
        <div className="content">
          <div className="product">
            <img src={data.cover} alt="product-cover" />
            <div className="product-info">
              <div className="author-title">
                <span>{data.authors}</span>
                <span>{data.title}</span>
              </div>
              <div className="description">
                <div className="description-element">
                  <span className="main-font">Категории</span>
                  <span className="second-font">{data.categories}</span>
                </div>
                <div className="description-element">
                  <span className="main-font">Дата публикации</span>
                  <span className="second-font">{data.publishedDate}</span>
                </div>
                <div className="description-element">
                  <span className="main-font">Кол-во страниц</span>
                  <span className="second-font">{data.pageCount}</span>
                </div>
                <div className="description-element">
                  <span className="main-font">Язык</span>
                  <span className="second-font">{data.language}</span>
                </div>
                <div className="description-element">
                  <span className="main-font">Издатель</span>
                  <span className="second-font">{data.publisher}</span>
                </div>
              </div>
            </div>
            <div className="btn-section">
              <div className="fav-btn">Добавить в Избранное</div>
              <Link
                className="return-btn"
                to={location?.state?.from?.pathname ?? "/"}
              >
                Назад
              </Link>
            </div>
          </div>
          <div className="summary">
            <div className="summary-text">{data.description}</div>
          </div>
        </div>
      </div>
    );
  }
}

export default About;

Мое api:

mport { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const booksApi = createApi({
  reducerPath: "booksApi",
  baseQuery: fetchBaseQuery({
    baseUrl: "https://www.googleapis.com/books/v1/",
  }),
  endpoints: (builder) => ({
    getBooks: builder.query({
      query: (query) => ({
        url: `volumes?q=${query || "%22%22"}`,
        params: {
          maxResults: 27,
          projection: "lite",
        },
      }),
      transformResponse: (response) =>
        response.items.map((item) => ({
          id: item.id,
          title: item.volumeInfo.title,
          author: item.volumeInfo.authors,
          cover: item.volumeInfo.imageLinks
            ? item.volumeInfo.imageLinks.thumbnail
            : null,
        })),
    }),
    getBooksInfo: builder.query({
      query: (bookId) => `volumes/${bookId}`,
      transformResponse: (book) => ({
        id: book.id,
        title: book.volumeInfo.title,
        authors: book.volumeInfo.authors,
        cover: book.volumeInfo.imageLinks?.thumbnail,
        categories: book.volumeInfo.categories,
        language: book.volumeInfo.language,
        pageCount: book.volumeInfo.pageCount,
        publishedDate: book.volumeInfo.publishedDate,
        publisher: book.volumeInfo.publisher,
        description: book.volumeInfo.description,
      }),
    }),
  }),
});

export const { useGetBooksQuery, useGetBooksInfoQuery } = booksApi;

Файл index.js, где приложение обернуто в BrowserRouter:

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import "./index.css";
import { store } from "./store/store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);