react-pdf/renderer's styles in NextJS not getting applying?

Question

I created the NextJS project in typescript and initialized it with TailwindCSS, to create PDF I used react-pdf/renderer and coded it like this, but this is showing like this, but in the flex, I added a row, what went wrong with this code?

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


const styles = StyleSheet.create({
  page: {
    backgroundColor: '#E4E4E4',
    flexDirection: 'row',
  },
  section: {
    margin: 10,
    padding: 10,
  }
});


export default function PdfPreview() {
  return (
    <Document>
    <Page size="A4" style={styles.page}>
      {/* First Row */}
      <View style={styles.section}>
        <Text>Section #1</Text>
        <Text>Section #2</Text>
      </View>
     

      {/* Second Row */}
      <View style={styles.section}>
        <Text>Section #3</Text>
        <Text>Section #4</Text>
      </View>
      
    </Page>
  </Document>
  );
}