|  |  | 
 |  |  | import * as React from 'react'; | 
 |  |  | import  { useState, useRef, useEffect, useMemo, useCallback } from 'react'; | 
 |  |  | import { Stack, Chip, Dialog, DialogTitle, DialogContent, IconButton, CircularProgress } from '@mui/material'; | 
 |  |  | import { useTranslate, useRecordContext } from 'react-admin'; | 
 |  |  | import CloseIcon from '@mui/icons-material/Close'; | 
 |  |  | 
 |  |  | const CrossZoneAreaField = () => { | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const record = useRecordContext(); | 
 |  |  |     const [open, setOpen] = React.useState(false); | 
 |  |  |     const [areaNames, setAreaNames] = React.useState([]); | 
 |  |  |     const [loading, setLoading] = React.useState(false); | 
 |  |  |     const [open, setOpen] = useState(false); | 
 |  |  |     const [areaNames, setAreaNames] = useState([]); | 
 |  |  |     const [loading, setLoading] = useState(false); | 
 |  |  |  | 
 |  |  |     const handleOpen = () => { | 
 |  |  |         setOpen(true); | 
 |  |  | 
 |  |  |         } | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     React.useEffect(() => { | 
 |  |  |         if (record?.areaIds && record.areaIds.length > 0) { | 
 |  |  |     useEffect(() => { | 
 |  |  |         if (record?.areaIds && record.areaIds.length !== 0  && record.areaIds.length > 0) { | 
 |  |  |             fetchAreaNames(); | 
 |  |  |         } | 
 |  |  |     }, [record]); | 
 |  |  |     }, [record]);     | 
 |  |  |  | 
 |  |  |     if (loading) { | 
 |  |  |         return <CircularProgress size={20} />; |