Error: Invalid element of type passed to PDF renderer

Question

I would like to implement the PDF download in my project, however the File is not being downloaded, and the terminal returns this error " Error: invalid element of the type passed to the PDF renderer" I would like to know what might be wrong.

Component:

import React, { useEffect, useState } from "react";
import { Page, Text, View, Document, StyleSheet, PDFDownloadLink } from "@react-pdf/renderer";

// Create styles
const PdfGenerator = () => {
  const [isReady, setIsReady] = useState(false);
  const styles = StyleSheet.create({
    page: {
      flexDirection: "row",
      backgroundColor: "#E4E4E4",
    },
    section: {
      margin: 10,
      padding: 10,
      flexGrow: 1,
    },
  });

  useEffect(() => {
    setIsReady(true);
  }, []);
  // Create Document Component

  const MyDocument = (
    <Document>
      <Page size="A4" style={styles.page}>
        <View style={styles.section}>
          <Text>Section #1</Text>
        </View>
        <View style={styles.section}>
          <Text>Section #2</Text>
        </View>
      </Page>
    </Document>
  );

  return (
    <>
      {isReady ? (
        <PDFDownloadLink document={MyDocument} fileName="movielist.pdf">
          {({ blob, url, loading, error }) => (loading ? "Loading document..." : "Download now!")}
          <Document>
            <Page size="A4" style={styles.page}>
              <View style={styles.section}>
                <Text>Section #1</Text>
              </View>
              <View style={styles.section}>
                <Text>Section #2</Text>
              </View>
            </Page>
          </Document>
        </PDFDownloadLink>
      ) : (
        ""
      )}
    </>
  );
};
export default PdfGenerator;

Call of the Component:

import { PDFDownloadLink, PDFViewer } from "@react-pdf/renderer";
import PdfGenerator from "./submission/PdfGenerator";

const ExportSubmissionsButton = () => {
    return (
          <div>
            <PDFDownloadLink
              fileName="movielist.pdf"
              style={{
                textDecoration: "none",
                padding: "10px",
                color: "#4a4a4a",
                backgroundColor: "#f2f2f2",
                border: "1px solid #4a4a4a",
              }}
            >
              {({ blob, url, loading, error }) => (loading ? "Loading document..." : "Download Pdf")}
            </PDFDownloadLink>
          </div>
      );
}