Cant render a react component from onClick

i’m working on a React web app. I would like to render a component from an onClick. So a user looking through profiles should be able to click on a profile and that directs them to the profile/portfolio page. The profiles are mapped through and the onClick is in a map. The code doesn’t work though, the profile prop that’s passed down is undefined. profiles and profile information is pulled from Firestore.

Page With Multiple Profiles

return (
<div>
            {profiles.map((profile) => {
              const portfolioShow = (profile) => {
                console.log("Portfolio Show: ", profile.user);
                navigate(`/portfolio/${profile.user}`);
                return <Portfolio profile={profile} />;
              };

              return (
                <div
                  key={profile.user}
                  onClick={() => portfolioShow(profile)}
                >
                  // Components that show different profiles.
                </div>
)

The Portfolio Show console log works and it prints the profile.user.

The Portfolio page:

export default function Portfolio({ profile }) {
  useEffect(() => {
    console.log("Profile: ", profile);
  }, [publish, profile]);


  return (
          <>
            // portfolio and profile components
          </>
  );
}

The profile prop that’s passed down is undefined.

Any assistance would be appreciated.