Cannot read properties as undefined

so I had to do a db call in my serverside props of my next js application because the fetch has been giving me an error when I try to next start. The issue I have now is that I cannot get the data to be json like if i was getting it from the api.

import UploadFiles from "../../components/upload/upload";
import MemberUpdate from "../../components/members/memberUpdate";
import MemberNew from "../../components/members/memberNew";
import Documents from "../../components/documents/documents";
import classes from "../../styles/member.module.css";
import {connectDatabase} from '../../helpers/db-util';

function Members(props) {
  const member = props.members.data.find(
    (element) => element.memberId === props.session.user.name
  ); 
 
  return (
    <section>
      <div>
        <h1>Members Area</h1>
      </div>
      <div className={classes.adminouterbox}>
        <div className={classes.memberUpdate}>
          <MemberUpdate user={member} />
        </div>
      </div>

      <div className={classes.adminouterbox}>
        <UploadFiles />
        <Documents />
        <MemberNew />
      </div>
    </section>
  );
}

export async function getServerSideProps(context) {
  const session = await getSession({ req: context.req });

  const client = await connectDatabase();
  const collection = client.db().collection('members');
  const data = await collection.find({}).toArray()
  const members = JSON.stringify(data)
  console.log( members)
  if (!session) {
    return {
      redirect: {
        destination: "/login",
        permanent: false,
      },
    };
  }

  return { props: { session, members: members } };
}

export default Members;

the error that i get is as follows error - pages/members/index.js (10:36) @ Members TypeError: Cannot read properties of undefined (reading 'find') 8 | 9 | function Members(props) {

10 | const member = props.members.data.find( | ^ 11 | (element) => element.memberId === props.session.user.name 12 | ); 13 |