react-pdf: how to view pdf and return to sender

Question

I have successfully implemented react-pdf. The pdf has 3 navigation buttons - Return, Previous, and Next. The button that does not work is "Return". The functioning components are Send.js and RenderPDF.js. Send.js displays a list of documents with an "Invoice" button adjacent to each item. Clicking Invoice sends a prop (pdf name) to RenderPDF.js, which renders the pdf. I have no graceful means of returning to Send.js after viewing the pdf. Using history.push(), I can return to any other page in my site except Send.js. Any suggestions?

send.js

import React, {
    useContext,
    useEffect,
    useState
} from 'react';
import PageTitle from '../components/common/PageTitle';
import SendPageHeading from '../components/common/SendPageHeading';
import {
    FetchContext
} from '../context/FetchContext';
import ButtonDanger from '../components/common/ButtonDanger';
import ButtonLookup from '../components/common/ButtonLookUp';
import FormError from '../components/FormError';

import {
    RenderPDF
} from '../components/common/RenderPDF.js';

const SendItemContainer = ({
    children
}) => ( <
    div className = "bg-white rounded shadow-md mb-2 p-0" > {
        children
    } < /div>
);

const SendItem = ({
    item,
    handlePdfProcess,
    onDelete
}) => {
    return ( <
        div className = "flex" >
        <
        div className = "flex flex-row w-full" >
        <
        div className = "flex flex-row w-full my-1 " >
        <
        div className = "relative text-sm w-8 left-0 text-gray-600" > {
            item.companyKey
        } <
        /div> <
        div className = "relative text-sm w-88 left-50 text-gray-600" > {
            item.companyName
        } <
        /div> <
        div className = "relative text-sm w-8 left-100 text-gray-600" > {
            item.docType
        } <
        /div> <
        div className = "relative text-sm w-8 left-125 text-gray-600" > {
            item.docNo
        } <
        /div> <
        div className = "relative text-sm w-24 left-175 text-gray-600" > {
            item.docDate.substr(5, 2) +
            '-' +
            item.docDate.substr(8, 2) +
            '-' +
            item.docDate.substr(0, 4)
        } <
        /div> <
        div className = "relative text-sm w-94 left-225"
        style = {
            item.emailTo.indexOf(' ') === -1 ?
            {
                color: '#212529'
            } :
            {
                color: '#e53e3e',
                fontWeight: 'bold'
            }
        } >
        {
            item.emailTo
        } <
        /div> <
        div className = "relative text-sm w-8 left-275 text-gray-600" > {
            item.emailStatus
        } <
        /div> <
        /div> <
        div className = "flex flex-row self-end mr-3" >
        <
        ButtonLookup text = "Invoice"
        onClick = {
            () => handlePdfProcess(item)
        }
        /> <
        ButtonDanger text = "Delete"
        onClick = {
            () => onDelete(item)
        }
        /> <
        /div> <
        /div> <
        /div>
    );
};

const Send = () => {
        const fetchContext = useContext(FetchContext);
        const [docData, setDocData] = useState([]);
        const [pdfData, setPdfData] = useState();
        const [pdfFlag, setPdfFlag] = useState(false);
        const [errorMessage, setErrorMessage] = useState();

        useEffect(() => {
            const getSend = async () => {
                try {
                    const {
                        data
                    } = await fetchContext.authAxios.get('send');
                    setDocData(data);
                } catch (err) {
                    console.log('the err', err);
                }
            };

            getSend();
        }, [fetchContext]);

        const onDelete = async item => {
            try {
                if (window.confirm('Are you sure you want to delete this item?')) {
                    const {
                        data
                    } = await fetchContext.authAxios.delete(
                        `docData/${item.id}`
                    );
                    setDocData(docData.filter(item => item.id !== data.modifiedItem.id));
                }
            } catch (err) {
                const {
                    data
                } = err.response;
                setErrorMessage(data.message);
            }
        };

        const handlePdfProcess = item => {
            // const docName = item.docName;

            setPdfData(`${item.docName}`);

            setPdfFlag(true);
            console.log(` pdfFlag: ${pdfFlag}`);
        };

        return pdfFlag ? ( <
            >
            <
            RenderPDF dataFromSend = {
                pdfData
            }
            /> <
            />
        ) : ( <
            >
            <
            PageTitle title = "Invoice Staging" / >
            <
            SendPageHeading / > {
                errorMessage && < FormError text = {
                    errorMessage
                }
                />} {
                    docData && docData.length ?
                        docData.map(item => ( <
                            SendItemContainer key = {
                                item.id
                            } >
                            <
                            SendItem item = {
                                item
                            }
                            handlePdfProcess = {
                                handlePdfProcess
                            }
                            /> <
                            SendItem item = {
                                item
                            }
                            onDelete = {
                                onDelete
                            }
                            /> <
                            /SendItemContainer>
                        )) :
                        'No Document Items'
                } <
                />
            );
        };

        export default Send;

< RenderPDF.js

import React, {
    useState
} from 'react';
import {
    Document,
    Page,
    pdfjs
} from 'react-pdf/dist/esm/entry.webpack';
import {
    useHistory
} from 'react-router-dom';

pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.js';

export const RenderPDF = dataFromSend => {
    const [numPages, setNumPages] = useState(null);
    const [pageNumber, setPageNumber] = useState(1); //setting 1 to show fisrt page

    const history = useHistory(null);

    function onDocumentLoadSuccess({
        numPages
    }) {
        setNumPages(numPages);
        setPageNumber(1);
    }

    const findValueByPrefix = (object, prefix) => {
        for (var property in object) {
            if (
                object.hasOwnProperty(property) &&
                property.toString().startsWith(prefix)
            ) {
                return object[property];
            }
        }
    };

    let pdfDoc = findValueByPrefix(dataFromSend, 'dataFromSend');
    pdfDoc = `/pdfs/${pdfDoc}`;
    console.log(`  prop: ${pdfDoc}`);

    function changePage(offset) {
        setPageNumber(prevPageNumber => prevPageNumber + offset);
    }

    function previousPage() {
        changePage(-1);
    }

    function nextPage() {
        changePage(1);
    }

    const return2Send = () => {
        let path = '/send';
        history.push(path);
    };

    return ( <
        >
        <
        Document file = {
            pdfDoc
        }
        onLoadSuccess = {
            onDocumentLoadSuccess
        } >
        <
        Page pageNumber = {
            pageNumber
        }
        /> <
        /Document> <
        div >
        <
        p >
        Page {
            pageNumber || (numPages ? 1 : '--')
        }
        of {
            numPages || '--'
        } <
        /p> <
        button type = "button"
        style = {
            {
                marginRight: '24px'
            }
        }
        onClick = {
            return2Send
        } >
        Return <
        /button> <
        button type = "button"
        disabled = {
            pageNumber <= 1
        }
        style = {
            {
                marginRight: '24px'
            }
        }
        onClick = {
            previousPage
        } >
        Previous <
        /button> <
        button type = "button"
        disabled = {
            pageNumber >= numPages
        }
        onClick = {
            nextPage
        } >
        Next <
        /button> <
        /div> <
        />
    );
};