change boostrap modal

src/Components/Modal/AgregarManual.js

 import React, { memo } from 'react';
 import * as Yup from 'yup';
 import { useFormik, Form, FormikProvider } from 'formik';
-import { Modal } from 'react-bootstrap'
+import { Dialog,DialogContent, DialogTitle,DialogActions } from '@mui/material'
 import toast, { Toaster } from 'react-hot-toast';
 
 import { AdapterDateFns as DateFnsUtils } from '@mui/x-date-pickers/AdapterDateFns';
 
   return (
 
-    <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={onClose}>
+    <Dialog 
+      open={visible} 
+      fullWidth="lg" 
+      maxWidth="md" 
+      aria-labelledby="contained-modal-title-vcenter" 
+      onClose={onClose}>
 
-      <Modal.Header>
+      <DialogTitle>
         <button onClick={onClose} type="button" className="close" data-dismiss="modal">&times;</button>
         <h4 className="modal-title" style={{ color: '#252525' }}>Agregar Puesto</h4>
-      </Modal.Header>
-      <Modal.Body className="modal-body">
+      </DialogTitle>
+
+      <DialogContent className="modal-body">
 
         <Tabs value={tab} onChange={changeTab} aria-label="basic tabs example">
           <Tab label="Información" />
                     label="Nombre"
                     fullWidth
                     {...getFieldProps('nombrepuesto')}
+                    helperText={touched.nombrepuesto && errors.nombrepuesto}
                     error={Boolean(touched.nombrepuesto && errors.nombrepuesto)}
                   />
 
             </TabPanel>
 
 
-            <Modal.Footer>
+            <DialogActions>
               <Button
                 type="submit"
                 className="registerBtn"
                 sx={{ mt: 1, mr: 1 }} >
                 {'Guardar'}
               </Button>
-            </Modal.Footer>
+            </DialogActions>
 
           </Form>
         </FormikProvider>
-      </Modal.Body>
+      </DialogContent>
+
       <Backdrop
         sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
         open={open}
         <CircularProgress color="inherit" />
       </Backdrop>
       <Toaster position="top-right" />
-    </Modal>
+    </Dialog>
   )
 }
 export default memo(Manual);

src/Components/Modal/PasswordModal.jsx

-import { Modal } from 'react-bootstrap'
+import { Dialog,DialogContent, DialogTitle } from '@mui/material'
 import * as React from 'react';
 
 import {
 
 
   return (
-    <Modal size="lg"
+    <Dialog 
+      open={visible}
+      fullWidth="lg"
+      maxWidth="md"
       aria-labelledby="contained-modal-title-vcenter"
-      centered show={visible}
       onHide={handleClose}
     >
-      <Modal.Header>
+      <DialogTitle>
         <button type="button" className="close" onClick={handleClose}>&times;</button>
         <h4 className="modal-title">Crear Contraseña</h4>
-      </Modal.Header>
-      <Modal.Body className="modal-body">
+      </DialogTitle>
+      <DialogContent className="modal-body">
 
         <Box sx={{ width: '100%' }}>
           <Stepper
             )}
         </Box>
 
-      </Modal.Body>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   )
 }