pdf render show

src/Components/Home/Candidato.jsx

 } from '@mui/material';
 import {
   CheckBox as CheckBoxIcon,
-  FmdBad as FmdBadIcon,
+  // FmdBad as FmdBadIcon,
   NewReleases as NewReleasesIcon
 } from '@mui/icons-material'
 import { useNavigate } from 'react-router-dom'

src/Components/Modal/EditPlaza.js

   const auth = useSelector((state) => state.token)
   const queryClient = useQueryClient()
   let { visible, toggle } = props
-  const [puestoSup, setPuestoSup] = React.useState('');
+  // const [puestoSup, setPuestoSup] = React.useState('');
 
   const [open, setOpen] = React.useState(false);
   const [tab, setTab] = React.useState(0);
   const [checklist, setChecklist] = React.useState([]);
 
-  const changePuestoSup = (event) => {
-    setPuestoSup(event.target.value);
-  };
+  // const changePuestoSup = (event) => {
+  //   setPuestoSup(event.target.value);
+  // };
 
   const addPrueba = (check, id) => {
     let tests = getValues("tests")

src/Pages/Resultados.jsx

 import { useParams } from 'react-router-dom'
 import { Service } from '../Utils/HTTP';
 import { useSelector } from 'react-redux';
-import { Button  } from '@mui/material'
+import { Button, Box, Paper } from '@mui/material'
 import { Document, Page, pdfjs } from 'react-pdf/dist/esm/entry.webpack';
 // import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
   const [pageNumber, setPageNumber] = useState(1);
 
   function onDocumentLoadSuccess({ numPages }) {
-    console.log('numero de pagians',numPages)
+    console.log('numero de pagians', numPages)
     setNumPages(numPages);
   }
 
-  function onLoadError(error){
+  function onLoadError(error) {
     console.log('error: ', error)
   }
 
   return (
     <div>
-      <div>
-        <Button  onClick={() =>setPageNumber(pageNumber + 1)} >
+      <div className="pdf_controls">
+        <Button variant="contained" onClick={() => pageNumber > 1 ? setPageNumber(pageNumber - 1) : null} >
+          Anterior
+        </Button>
+        <Button style={{ margin: 5 }} variant="contained" onClick={() => pageNumber + 1 <= numPages   ? setPageNumber(pageNumber + 1) : null} >
           Siguiente
         </Button>
+
+        <p>
+          Página {pageNumber} de {numPages}
+        </p>
+
+      </div>
+
+      <div className="Example__container__document">
+        <Document renderMode="canvas" file={pdf.data} onLoadSuccess={onDocumentLoadSuccess} onLoadError={onLoadError}>
+          <Page width={800} pageNumber={pageNumber} loading={<Cargando />} />
+        </Document>
       </div>
-      <Document renderMode="canvas" file={pdf.data} onLoadSuccess={onDocumentLoadSuccess} onLoadError={onLoadError}>
-        <Page  pageNumber={pageNumber} loading={<Cargando/>} />
-      </Document>
-      <p>
-        Page {pageNumber} of {numPages}
-      </p>
     </div>
   )
 };
     let url = `/report/cleaverResult/${id}?output=pdf`
     let rest = new Service(url);
 
-    pdfjs.GlobalWorkerOptions.workerSrc =  `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
+    pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 
     rest
       .getBlob(auth.token)
   return (
     <div className="content-section">
       <div className="main">
-        <h1>Resultados {id}</h1>
-        <hr />
-        {
-          pdf ?
-            <MyDocument pdf={pdf} />
-            : <div> <h5> loading...</h5></div>
-        }
+        <Box sx={{ width: '100%' }}>
+          <Paper elevation={0} sx={{ mb: 2, padding: 2, height: '100%', minHeight: '95vh', boxShadow: 'none !important' }}>
+            <h1>Resultados {id}</h1>
+            <hr />
+            {
+              pdf ?
+                <MyDocument pdf={pdf} />
+                : <div> <h5> loading...</h5></div>
+            }
+          </Paper>
+        </Box>
       </div>
     </div>
   )