SubTeam.tsx

import styles from "./styles.module.css";
import PopupPortrait from "./SmallPortraitCard";
import Link from "@docusaurus/Link";
import { useLocation } from "@docusaurus/router";

export default function SubTeam({ subTeamName, subTeam }) {
  let firstName = useLocation().pathname.split("/about/")[1];
  console.log('First name before transformation:', firstName);


  return (
    <div className={styles.subteam_container}>
      <h2 className={"text--center"}> {subTeamName}</h2>
      <div className={"container"}>
        <ul className="row padding-none flex-full-centered row-with-margin-top">
          {subTeam.map(
            (person, index) =>
              !void 0 && (
                <li className="cards-list" key={index}>
                  <div className="col">
                    <Link href={`/about/${person.firstName}`}>
                      <PopupPortrait
                        person={person}
                        isPopupOpen={
                          firstName === person.firstName
                        }
                      />
                    </Link>
                  </div>
                </li>
              )
          )}
        </ul>
      </div>
    </div>
  );
}