Upload Container - Copy this React, Mui Component to your project

Re-write-this-react-component-to-use-mui-file-uppload:-import-React,-{-useState-}-from-'react';-import-{-useDispatch,-useSelector-}-from-'react-redux';-import-{-Button,-TextField,-Grid,-Box-}-from-'@mui/material';-import-{-setProductCode-}-from-'../../store/reducers/referenceSlice';-import-{setLoading,-setSnackbar}-from-'../../store/reducers/commonSlice';-import-*-as-Constants-from-'../../utils/constants';-import-APIService-from-'../../services/apiService';-const-PrintFileUploadComponent-=-()-=>-{-const-apiService-=-new-APIService();-const-dispatch-=-useDispatch();-const-{-productCode-}-=-useSelector((state:-any)-=>-state.reference);-const-[selectedFile,-setSelectedFile]-=-useState<File-|-null>(null);-const-handleFileSelect-=-(event:-React.ChangeEvent<HTMLInputElement>)-=>-{-if-(event.target.files-&&-event.target.files[0])-{-setSelectedFile(event.target.files[0]);-}-};-const-handleUpload-=-async-()-=>-{-if-(!selectedFile-||-!productCode)-return;-const-formData-=-new-FormData();-formData.append('file',-selectedFile);-formData.append('productCode',-productCode);-dispatch(setLoading({isLoading:-true,-text:-"Uploading-Printfile..."}));-const-response-=-await-apiService.uploadPrintFile(formData);-dispatch(setLoading({isLoading:-false}));-if-(response)-{-dispatch(setSnackbar({-open:-true,-severity:-"success",-message:-response.message-}));-}-};-return-(-<Grid-container-spacing={2}-direction="column"-alignItems="center">-<Grid-item>-<Box-sx={{-p:-2-}}>-<TextField-label="Product-Code"-value={productCode}-onChange={(e)-=>-dispatch(setProductCode(e.target.value))}-sx={{-mb:-2-}}-/>-<input-type="file"-accept=".tif,.tiff"-onChange={handleFileSelect}-style={{-display:-'block',-margin:-'10px-0'-}}-/>-<Button-variant="contained"-onClick={handleUpload}-style={{-backgroundColor:-Constants.printerProfileButtonColor-}}-disabled={!selectedFile-||-!productCode}->-Upload-Print-File-</Button>-</Box>-</Grid>-</Grid>-);-};-export-default-PrintFileUploadComponent;