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

I want you to desing me a modal for assigning care giver. it will open if i click assign button i will share you my code and the modal will have a global search using caregiver name, address(address is object and have line1 and line2), salary or phone number and after that it will show only 5 care in one modal we will gave next the caregiver will be shown using card each care will have caregiverimage,name,phone numbe and category and we can select only ine care giver by one click , if we double click on the card another modal will show care giver all info about care giver like name, phone number, email, password, image, category, education, experience, nationality, languages, date_time_preference_to_work, about, gender, available, fees, address, rating, is_booked, dob, date, vetting_status, status. and if select one care giver with one click and modal will have assign and cancel and if we clcik assign it ask if we are sure the if we say yes it will be assigned my code is /* eslint disable no unused vars */ /* eslint disable react/prop types */ import React, { useState, useEffect } from "react"; import { Dialog, DialogContent, FormControl, TextField } from "@mui/material"; const AssignCaregiverModal = ({ open, careGivers, onClose, onAssign }) => { const [selectedCaregiver, setSelectedCaregiver] = useState(""); useEffect(() => { if (careGivers.length > 0 && !selectedCaregiver) { // Set initial caregiver if undefined setSelectedCaregiver(careGivers[0].id); } }, [careGivers, selectedCaregiver]); const handleAssign = () => { if (selectedCaregiver) { onAssign(selectedCaregiver); // Call the assign function with the selected caregiver onClose(); // Close the modal } else { console.warn("No caregiver selected"); } }; return ( <Dialog open={open} onClose={onClose}> <DialogContent> {careGivers.length > 0 ? ( <FormControl fullWidth> <TextField label="Select Caregiver" select value={selectedCaregiver} onChange={(e) => setSelectedCaregiver(e.target.value)} SelectProps={{ native: true }} > <option value="" disabled> {/* Select caregiver */} </option> {careGivers.map((caregiver) => ( <option key={caregiver._id} value={caregiver._id}> {caregiver.name} </option> ))} </TextField> </FormControl> ) : ( <p>No caregivers available</p> // Display this if caregivers not loaded )} <button onClick={handleAssign}>Assign Caregiver</button> </DialogContent> </Dialog> ); }; export default AssignCaregiverModal;