I have a Next.JS admin template I had purchased that I am attempting to transform into my app. I proceeded to setup SSR and try to grab the URL for my image from the database, however when attempting, it refuses to work. I can get it to work on my page, just not in a Fragment. Test.js produces the correct result, but Profile.js does not. Profile contains truncated code as it will not all fit on discord. It returns a undefined error on profile. Have spent hours on it and would appreciate any help offered.

Test.js:

import * as React from "react";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export async function getServerSideProps() {
    const user = await prisma.user.findUnique({
        where: {
            id: 1,
        },
    });
    return {
        props: {
            user,
        },
    };
}

const Test = ({ user }) => {
    return (
        <>
            <img src={user.profilePic}/>
            <h1>{user.name}</h1>
            <p>{user.email}</p>
            <p>{user.profilePic}</p>
            <p>{user.id}</p>
        </>
    )
};

export default Test;

Profile.JS

export async function getServerSideProps() {
  const user = await prisma.user.findUnique({
    where: {
      id: 1,
    },
  });
  return {
    // return the users name and photo as the prop
    props: {
      user: user
    },
  };
}

const Profile = ({ user }) => {
return (
      <>
        {/*<Avatar src={user.profilePic} alt={user.name} />*/}
      </>
  );