Styled Paper - Copy this React, Mui Component to your project

my code: "use client"; import React, { useState } from "react"; import Grid from '@mui/material/Grid2'; import { Container, TextField, Button, Box, Typography, Paper, IconButton, Tooltip, Tabs, Tab, FormControl, RadioGroup, FormControlLabel, Radio, Select, MenuItem, Chip, } from "@mui/material"; import { styled } from "@mui/system"; import { FaPlus, FaTrash } from "react-icons/fa"; const StyledPaper = styled(Box)(({ theme }) => ({ padding: theme.spacing(3), borderRadius: theme.spacing(2), boxShadow: theme.shadows[3], // marginTop: theme.spacing(4), backgroundColor : 'background.default' })); const LoRATrainingForm = () => { const [currentTab, setCurrentTab] = useState(0); const [dataSourceType, setDataSourceType] = useState("all"); const [selectedObjects, setSelectedObjects] = useState([]); const [selectedColumns, setSelectedColumns] = useState({}); const [modelType, setModelType] = useState("graph_prediction"); const [selectedModel, setSelectedModel] = useState(""); // Updated formData with default values const [formData, setFormData] = useState({ learningRate: "0.001", epochs: "10", batchSize: "32", dropout: "0.5", weightDecay: "0.01", }); const models = ["llama3", "phi", "qwen"]; const businessObjects = [ "customer_account", "transactions", "products", "orders", "payments", "inventory", ]; const objectSchemas = { customer_account: ["id", "name", "email", "address", "phone", "created_at"], transactions: ["id", "amount", "date", "type", "customer_id", "status"], products: ["id", "name", "price", "category", "description", "stock"], orders: ["id", "customer_id", "total_amount", "status", "order_date"], payments: ["id", "order_id", "amount", "payment_method", "status"], inventory: ["id", "product_id", "quantity", "location", "last_updated"], }; const [extraParams, setExtraParams] = useState([]); const [errors, setErrors] = useState({}); const handleTabChange = (event, newValue) => { setCurrentTab(newValue); }; const handleModelTypeChange = (event) => { setModelType(event.target.value); }; const handleModelSelection = (event) => { setSelectedModel(event.target.value); }; const handleDataSourceChange = (event) => { setDataSourceType(event.target.value); if (event.target.value === "all") { setSelectedObjects([]); setSelectedColumns({}); } }; const handleObjectSelection = (event) => { const newSelectedObjects = event.target.value; setSelectedObjects(newSelectedObjects); const newSelectedColumns = { ...selectedColumns }; newSelectedObjects.forEach(obj => { if (!newSelectedColumns[obj]) { newSelectedColumns[obj] = []; } }); Object.keys(newSelectedColumns).forEach(obj => { if (!newSelectedObjects.includes(obj)) { delete newSelectedColumns[obj]; } }); setSelectedColumns(newSelectedColumns); }; const handleColumnSelection = (object, columns) => { setSelectedColumns(prev => ({ ...prev, [object]: columns })); }; const validateForm = () => { let tempErrors = {}; if (!selectedModel) tempErrors.model = "Please select a model"; if (!formData.learningRate || parseFloat(formData.learningRate) <= 0) tempErrors.learningRate = "Must be a positive number"; if (!formData.epochs || parseInt(formData.epochs) <= 0) tempErrors.epochs = "Must be a positive integer"; if (!formData.batchSize || parseInt(formData.batchSize) <= 0) tempErrors.batchSize = "Must be a positive integer"; if ( !formData.dropout || parseFloat(formData.dropout) < 0 || parseFloat(formData.dropout) > 1 ) tempErrors.dropout = "Must be between 0 and 1"; if (!formData.weightDecay || parseFloat(formData.weightDecay) < 0) tempErrors.weightDecay = "Must be a non-negative number"; setErrors(tempErrors); return Object.keys(tempErrors).length === 0; }; const handleSubmit = (e) => { e.preventDefault(); if (validateForm()) { const submissionData = { ...formData, extraParams, dataSourceType, modelType, selectedModel, selectedObjects: dataSourceType === "custom" ? selectedObjects : "all", selectedColumns: dataSourceType === "custom" ? selectedColumns : "all", }; console.log("Form Data:", submissionData); } }; const handleReset = () => { setFormData({ learningRate: "0.001", epochs: "10", batchSize: "32", dropout: "0.5", weightDecay: "0.01", }); setExtraParams([]); setErrors({}); setDataSourceType("all"); setSelectedObjects([]); setSelectedColumns({}); setModelType("graph_prediction"); setSelectedModel(""); }; const handleChange = (e) => { const { name, value } = e.target; setFormData((prev) => ({ ...prev, [name]: value })); if (errors[name]) { setErrors((prev) => ({ ...prev, [name]: "" })); } }; const addExtraParam = () => { setExtraParams([...extraParams, { name: "", value: "" }]); }; const removeExtraParam = (index) => { setExtraParams(extraParams.filter((_, i) => i !== index)); }; const handleExtraParamChange = (index, field, value) => { const newParams = [...extraParams]; newParams[index][field] = value; setExtraParams(newParams); }; const BasicTab = () => ( <Box mt={3}> <FormControl component="fieldset" fullWidth sx={{ mb: 3 }}> <Typography variant="h6" gutterBottom> Model Type </Typography> <RadioGroup value={modelType} onChange={handleModelTypeChange} name="modelType" > <FormControlLabel value="graph_prediction" control={<Radio />} label="Graph Prediction" /> <FormControlLabel value="graph_knowledge" control={<Radio />} label="Graph Knowledge" /> </RadioGroup> </FormControl> <FormControl component="fieldset"> <Typography variant="h6" gutterBottom> Data Source Configuration </Typography> <RadioGroup value={dataSourceType} onChange={handleDataSourceChange} name="dataSource" > <FormControlLabel value="all" control={<Radio />} label="All Data" /> <FormControlLabel value="custom" control={<Radio />} label="Custom Selection" /> </RadioGroup> </FormControl> {dataSourceType === "custom" && ( <Box mt={3}> <FormControl fullWidth> <Typography variant="subtitle1" gutterBottom> Select Business Objects </Typography> <Select multiple value={selectedObjects} onChange={handleObjectSelection} renderValue={(selected) => ( <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}> {selected.map((value) => ( <Chip key={value} label={value} /> ))} </Box> )} > {businessObjects.map((object) => ( <MenuItem key={object} value={object}> {object} </MenuItem> ))} </Select> </FormControl> {selectedObjects.map((object) => ( <Box mt={2} key={object}> <Typography variant="subtitle2" gutterBottom> Select columns for {object} </Typography> <FormControl fullWidth> <Select multiple value={selectedColumns[object] || []} onChange={(e) => handleColumnSelection(object, e.target.value)} renderValue={(selected) => ( <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}> {selected.map((value) => ( <Chip key={value} label={value} /> ))} </Box> )} > {objectSchemas[object].map((column) => ( <MenuItem key={column} value={column}> {column} </MenuItem> ))} </Select> </FormControl> </Box> ))} </Box> )} </Box> ); const AdvancedTab = () => ( <Box> <Grid container spacing={3}> <Grid size={12}> <FormControl fullWidth error={!!errors.model}> <Typography variant="subtitle1" gutterBottom> Select Base Model </Typography> <Select value={selectedModel} onChange={handleModelSelection} displayEmpty > <MenuItem value=""> <em>Select a model</em> </MenuItem> {models.map((model) => ( <MenuItem key={model} value={model}> {model} </MenuItem> ))} </Select> {errors.model && ( <Typography variant="caption" color="error"> {errors.model} </Typography> )} </FormControl> </Grid> <Grid size={12} sm={6}> <TextField fullWidth label="Learning Rate" name="learningRate" type="number" value={formData.learningRate} onChange={handleChange} error={!!errors.learningRate} helperText={errors.learningRate || "Default: 0.001"} inputProps={{ step: "0.0001" }} /> </Grid> <Grid size={12} sm={6}> <TextField fullWidth label="Number of Epochs" name="epochs" type="number" value={formData.epochs} onChange={handleChange} error={!!errors.epochs} helperText={errors.epochs || "Default: 10"} inputProps={{ step: 1 }} /> </Grid> <Grid size={12} sm={6}> <TextField fullWidth label="Batch Size" name="batchSize" type="number" value={formData.batchSize} onChange={handleChange} error={!!errors.batchSize} helperText={errors.batchSize || "Default: 32"} inputProps={{ step: 1 }} /> </Grid> <Grid size={12} sm={6}> <TextField fullWidth label="Dropout Rate" name="dropout" type="number" value={formData.dropout} onChange={handleChange} error={!!errors.dropout} helperText={errors.dropout || "Default: 0.5"} inputProps={{ step: "0.1", min: 0, max: 1 }} /> </Grid> <Grid size={12}> <TextField fullWidth label="Weight Decay" name="weightDecay" type="number" value={formData.weightDecay} onChange={handleChange} error={!!errors.weightDecay} helperText={errors.weightDecay || "Default: 0.01"} inputProps={{ step: "0.0001", min: 0 }} /> </Grid> </Grid> <Box mt={3}> <Typography variant="h6" gutterBottom> Additional Parameters <Tooltip title="Add Parameter"> <IconButton color="primary" onClick={addExtraParam} aria-label="add parameter" > <FaPlus /> </IconButton> </Tooltip> </Typography> {extraParams.map((param, index) => ( <Box key={index} mb={2}> <Grid container spacing={2} alignItems="center"> <Grid size={5}> <TextField fullWidth label="Parameter Name" value={param.name} onChange={(e) => handleExtraParamChange(index, "name", e.target.value) } /> </Grid> <Grid size={5}> <TextField fullWidth label="Value" value={param.value} onChange={(e) => handleExtraParamChange(index, "value", e.target.value) } /> </Grid> <Grid size={2}> <IconButton color="error" onClick={() => removeExtraParam(index)} aria-label="remove parameter" > <FaTrash /> </IconButton> </Grid> </Grid> </Box> ))} </Box> </Box> ); return ( <Container maxWidth={false} > <StyledPaper sx={{backgroundColor : 'background.default'}}> <Typography variant="h4" gutterBottom align="center"> Train a new Adapter to your Agents </Typography> <Box sx={{ borderBottom: 1, borderColor: "divider" }}> <Tabs value={currentTab} onChange={handleTabChange} aria-label="training configuration tabs" > <Tab label="Basic" /> <Tab label="Advanced" /> </Tabs> </Box> <form onSubmit={handleSubmit}> <Box mt={3}> {currentTab === 0 ? <BasicTab /> : <AdvancedTab />} </Box> <Box mt={4} display="flex" justifyContent="space-between"> <Button variant="outlined" color="secondary" onClick={handleReset} size="large" > Reset </Button> <Button variant="contained" color="primary" type="submit" size="large" > Train Model </Button> </Box> </form> </StyledPaper> </Container> ); }; export default LoRATrainingForm; when i launch the training, create loader, add response in snackbar, might be error.