Переключение ориентации страницы с помощью поля выбора.Ориентация не изменится при использовании условного if?

Question

Итак, я встраиваю React-PDF https://react -pdf.org / в диалоговое окно начальной загрузки. У меня очень странная проблема. Я просто хочу изменить значение ориентации внутри объекта при изменении состояния. Теперь, если я установлю новое значение всегда, чтобы сказать 'пейзаж', iframe, содержащий PDF, обновится. Если я создаю условное, то iframe включается второй раз, когда происходит onChange? Я не могу понять, почему и попробовал так много разных способов решить эту проблему.

    import * as React from 'react';import {
    Modal,
    Button,
    Container,
    Col,
    Row,
    Form,
} from 'react-bootstrap';

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

import Renderer from './Renderer';

interface Props {
    onHide: Any;
}

const RenderPDF = () => (
    <Document>
        <Page>
            <View>
                <Text>Section #1</Text>
            </View>
        </Page>
    </Document>
);

const stylesPDF = StyleSheet.create({
    page: {
        size: 'A4',
        width: '106%',
        height: '500px',
        flexDirection: 'row',
        backgroundColor: 'tomato',
        orientation: 'portrait',
    },
    section: {
        margin: 10,
        padding: 10,
        flexGrow: 1,
    },
});

const ExportReport = ({
    onHide,
  }: Props) => {
    const [orientation, setOrientation] = React.useState(true);

    const orientationChange = () => {
        setOrientation(!orientation);
    };


    React.useEffect(() => {
        console.log('Orientation', orientation);
        console.log('StylesPDF', stylesPDF.page.orientation);


        // If we use this it changes on the first click which is what I need.
        // but then the orientation is always landscape which is not what I need.
        //stylesPDF.page.orientation = 'landscape';

        // If we use this the select box changes the object value on the second click
        if (!orientation) {
            stylesPDF.page.orientation = 'landscape';
        } else {
            stylesPDF.page.orientation = 'portrait';
        }

    }, [orientation]);

    return (
        <>
            <Modal.Body>
                <Container>
                    <Row>
                        <Col sm={4} className="left">
                            <h3>Report print settings</h3>
                            <Form.Group controlId="exampleForm.ControlSelect1">
                                <Form.Label>Orientation</Form.Label>
                                <Form.Control 
                                  as="select"
                                  value={orientation ? 'portrait' : 'landscape'}
                                  onChange={() => orientationChange()}
                                >
                                    <option value="portrait">Portrait</option>
                                    <option value="landscape">Landscape</option>
                                </Form.Control>
                            </Form.Group>
                        </Col>
                        <Col sm={8} className="right">
                            <Renderer
                              style={stylesPDF}
                            >
                                <View style={stylesPDF.section}>
                                    <Text>Section #1</Text>
                                </View>
                            </Renderer>
                        </Col>
                    </Row>
                </Container>
            </Modal.Body>
            <Modal.Footer>
                <Col sm={4} className="left">
                <Button onClick={onHide}>Close</Button>
                </Col>
                <Col sm={8} className="right">
                <Button>Email</Button>
                <Button>
                {/* <PDFDownloadLink document={<RenderPDF />} fileName="report.pdf">
                    {
                        ({
                        blob, url, loading, error,
                        }) => (loading ? 'Loading document...' : 'Save as PDF')
                    }
                </PDFDownloadLink> */}
                </Button>
                <Button variant="success">Print</Button>
                </Col>
            </Modal.Footer>
        </>
    );
};

export default ExportReport;