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

//-client/src/components/ParkingSpotForm.jsx-import-React,-{-useState,-useEffect-}-from-"react";-import-axios-from-"axios";-const-ParkingSpotForm-=-({-onNewEntry-})-=>-{-const-[formData,-setFormData]-=-useState({-slotNumber:-"",-vehicleNumber:-"",-userName:-"",-contactEmail:-"",-});-const-[occupiedSlots,-setOccupiedSlots]-=-useState([]);-const-[errorMessage,-setErrorMessage]-=-useState("");-useEffect(()-=>-{-//-Fetch-occupied-slots-on-mount-const-fetchOccupiedSlots-=-async-()-=>-{-try-{-const-response-=-await-axios.get("http://localhost:8000/api/spots");-const-occupied-=-response.data-.filter((spot)-=>-spot.occupied)-.map((spot)-=>-spot.slotNumber);-setOccupiedSlots(occupied);-}-catch-(err)-{-console.error("Error-fetching-spots:",-err);-}-};-fetchOccupiedSlots();-},-[]);-const-handleChange-=-(e)-=>-{-const-{-name,-value-}-=-e.target;-setFormData({-...formData,-[name]:-value-});-};-const-handleSubmit-=-async-(e)-=>-{-e.preventDefault();-try-{-const-response-=-await-axios.post(-"http://localhost:8000/api/reserve",-formData-);-onNewEntry(response.data);-setFormData({-slotNumber:-"",-vehicleNumber:-"",-userName:-"",-contactEmail:-"",-});-setErrorMessage("");-//-Clear-error-on-success-}-catch-(err)-{-setErrorMessage(err.response?.data?.error-||-"Error-reserving-spot");-}-};-return-(-<form-onSubmit={handleSubmit}>-<select-name="slotNumber"-value={formData.slotNumber}-onChange={handleChange}->-<option-value="">Select-Slot</option>-{[...Array(12)].map((_,-i)-=>-(-<option-key={i}-value={i-+-1}-disabled={occupiedSlots.includes(i-+-1)}->-{`Slot-${i-+-1}`}-</option>-))}-</select>-<input-type="text"-name="vehicleNumber"-placeholder="Vehicle-Number"-value={formData.vehicleNumber}-onChange={handleChange}-required-/>-<input-type="text"-name="userName"-placeholder="User-Name"-value={formData.userName}-onChange={handleChange}-required-/>-<input-type="email"-name="contactEmail"-placeholder="Contact-Email"-value={formData.contactEmail}-onChange={handleChange}-required-/>-<button-type="submit">Reserve-Spot</button>-{errorMessage-&&-<p-style={{-color:-"red"-}}>{errorMessage}</p>}-</form>-);-};-export-default-ParkingSpotForm;