I am attempting to store Firebase documents as an array of objects, set a component's state equal to that array, and then display the objects through a Material Table however am receiving the following error: "Objects are not valid as a React child (found: object with keys {seconds, nanoseconds}). If you meant to render a collection of children, use an array instead."

const getSamples = async (isAdmin, userID) => {
  initializeApp({
    apiKey: 'AIzaSyC64KY9UehoX2fk7Ugw2XNPvG4zZ7sSdsQ',
    authDomain: 'uno-genomics.firebaseapp.com',
    databaseURL: 'https://uno-genomics-default-rtdb.firebaseio.com',
    projectId: 'uno-genomics',
    storageBucket: 'uno-genomics.appspot.com',
    messagingSenderId: '351603848354',
    appId: '1:351603848354:web:e974a024da6b7e7472d3fb'
  });
  const db = getFirestore();

  const samples = [];
  if (isAdmin === true) {
    const querySnapshot = await getDocs(collection(db, 'samples'));
    querySnapshot.forEach((doc) => {
      const sample = {
        clientID: doc.get('clientID'),
        name: doc.get('name'),
        stage: doc.get('stage'),
        submissionDate: doc.get('submissionDate'),
        estimateCompletionDate: doc.get('estimateCompletionDate')
      };
      samples.push(sample);
    });
  } else {
    const querySnapshot = await getDocs(collection(db, 'samples'), where('clientID', '==', userID));
    querySnapshot.forEach((doc) => {
      const sample = {
        clientID: doc.get('clientID'),
        name: doc.get('name'),
        stage: doc.get('stage'),
        submissionDate: doc.get('submissionDate'),
        estimateCompletionDate: doc.get('estimateCompletionDate')
      };
      samples.push(sample);
    });
  }
  return samples;
};

const Dashboard = () => {
  const [samples, setSamples] = useState([]);

  const userID = localStorage.getItem('userID');
  if (localStorage.getItem('adminMode') === 'true') {
    getSamples(true, userID).then((values) => {
      setSamples(values);
    });
  } else {
    getSamples(false, userID).then((values) => {
      setSamples(values);
    });
  }

  return (
    <>
      <Helmet>
        <title> UNO COVID Resources Collection </title>
      </Helmet>
      <MaterialTable
        columns={[
          { title: 'Client ID', field: 'clientID' },
          { title: 'Name', field: 'name' },
          { title: 'Stage', field: 'stage' },
          { title: 'Submission Date', field: 'submissionDate' },
          { title: 'Estimated Completion Date', field: 'completionDateEstimate' }
        ]}
        data={samples}
        title="Samples"
      />
    </>
  );
};

I have been able to display an array of fake objects stored in the component's state through Material Table so the error must have something to do with the asynchronous accession of Firebase.