The height of View component almost covers the entire page

[steph-crown]

I am having some layout issues with react-pdf.

This is my code

// JSX
<Document>
    <Page size="A3" style={styles.page}>
      <View style={styles.header} debug={true}>
        <Text style={styles.logo}>Cashflow</Text>
        <Text style={styles.date}>Monday, May 12, 2020</Text>
      </View>
      <View style={styles.summary} wrap={false}>
        <Text style={styles.logo}>Section #2</Text>
      </View>
  </Page>
</Document>

// stylesheet


const styles = StyleSheet.create({
  page: {
    flexDirection: "column",
    backgroundColor: "#F6F8FA",
    display: "flex",
    border: "1px solid red",
    width: "100%",
    padding: "26px 20px",
  },
  logo: {
    fontWeight: 800,
    fontSize: "20px",
    lineHeight: "22px",
    color: "#67ADC8",
    fontFamily: "Inter",
  },
  date: {
    fontWeight: 700,
    fontSize: "14px",
    lineHeight: "22px",
    color: "#94A6B3",
    fontFamily: "Inter",
  },
  header: {
    margin: 0,
    display: "flex",
    flexDirection: "row",
    padding: 0,
    // flexGrow: 1,
    width: "100%",
    justifyContent: "space-between",
    alignItems: "flex-start",
  },
  summary: {
    borderBottom: "1px solid #F3F4F6",
    borderTop: "4px solid #67ADC8",
    background: "#FFFFFF",
    padding: "32px",
    marginTop: "40px",
  },
});

But after downloading the pdf, this is what I see. I had to debug={true} to see it clearly. The problem here is that the height of the View is almost the height of the page. I don't know where the extra height is coming from. Please I need help with this, thanks.