Почему не отображается шторка при изменении ссылки?

Question

Александр Жарченко @exxxcitation1

Ваше Эникейшество

React

Почему не отображается шторка при изменении ссылки?

Есть код страницы, на которой отрисовывается шторка:

import { FC } from "react";
import { uniqueId } from "lodash";
import { ActionColumn } from "src/features/ui";
import {
  ListTemplateStyled,
  PageGridStyled,
  PageHeader,
  ContentGridStyled,
  Curtain,
} from "src/shared/ui";
import { TEAMS_PAGE_TITLE } from "../constants";
import { Group } from "./Group";
import { TeamsPage } from "src/routes";
import { useSearchParams } from "src/shared/hooks";

const counterMock = { title: "Команды", entire: 32, current: 12 };
const teamsMock = [
  { name: "Команда 1" },
  { name: "Команда 1" },
  { name: "Команда 1" },
  { name: "Команда 1" },
  { name: "Команда 1" },
  { name: "Команда 1" },
  { name: "Команда 1" },
  { name: "Команда 1" },
  { name: "Команда 1" },
  { name: "Команда 1" },
  { name: "Команда 1" },
  { name: "Команда 1" },
  { name: "Команда 1" },
  { name: "Команда 1" },
];

/** Страница со списком команд для участия в игре */
export const Teams: FC = () => {
  const searchParams = useSearchParams();
  const match = searchParams.has(TeamsPage.VIEW_CURTAIN);

  return (
    <PageGridStyled>
      <PageHeader title={TEAMS_PAGE_TITLE} />

      <ContentGridStyled>
        <ActionColumn
          title={counterMock.title}
          entire={counterMock.entire}
          current={counterMock.current}
        />

        <ListTemplateStyled>
          {teamsMock.map((team) => (
            <Group key={uniqueId()} name={team.name} />
          ))}
        </ListTemplateStyled>

        <Curtain open={match} path={TeamsPage.VIEW_CURTAIN} />
      </ContentGridStyled>
    </PageGridStyled>
  );
};

И есть код самое шторки:

import { FC } from "react";
import ReactDOM from "react-dom";
import { useCloseCurtain } from "src/shared/hooks";
import { CurtainProps } from "./interfaces";
import {
  BodyStyled,
  CloseIconBoxStyled,
  ContentStyled,
  GridStyled,
  OverlayStyled,
} from "./styles";
import { ReactComponent as CrossIcon } from "./svg/Cross.svg";

/** Шторка для просмотра и редактирования инфморациии элементов */
export const Curtain: FC<CurtainProps> = ({ open, path, children }) => {
  const handleClose = useCloseCurtain(path);

  return (
    <>
      {open &&
        ReactDOM.createPortal(
          <GridStyled data-testid="Curtain.Grid">
            <OverlayStyled data-testid="Curtain.Overlay">
              <CloseIconBoxStyled
                onClick={handleClose}
                data-testid="Curtain.CloseButton"
              >
                <CrossIcon data-testid="Curtain.CrossIcon" />
              </CloseIconBoxStyled>
            </OverlayStyled>

            <BodyStyled data-testid="Curtain.Body">
              <ContentStyled data-testid="Curtain.Content">
                {children}
              </ContentStyled>
            </BodyStyled>
          </GridStyled>,
          document.getElementById("root") as Element
        )}
    </>
  );
};

По нажатию определённой кнопки я меняю роут, добавляю в него гет параметр
Выглядит это, в итоге, вот так localhost:3000/teams?viewCurtain=true

При изменении ссылки шторка не отрисовывается, как я ожидал
Но если изначально вставить в адресную строку эту ссылку и перейти по ней, то шторка отобразится

Вместо serachParams, что есть:

export const useSearchParams = (): URLSearchParams => {
  const { search } = useLocation();

  return useMemo(() => new URLSearchParams(search), [search]);
};

переделывал на Router
Также не работает
Интересно сделать с помощью мэтча параметров

На работе есть аналогичный пример, но там всё прекрасно работает
Где то место, которое не даёт отрисоваться шторке сразу после изменения роута?

Учитывая то, что при удалении параметра, отвечающего за шторку, из ссылки через обработчик события, не руками - шторка успешно закрывается