Correcting error in foreign key

gui/rpk-gui/src/lib/crud/components/widgets/foreign-key.tsx

@@ -1,9 +1,11 @@
 import { FormContextType, RJSFSchema, UiSchema, WidgetProps } from '@rjsf/utils';
-import { Autocomplete, Button, CircularProgress, Container, Grid2, InputAdornment, Modal, TextField, Box } from "@mui/material";
+import {
+  Autocomplete, Button, CircularProgress, Container, Grid2, InputAdornment, Modal, TextField, Box, DialogContent
+} from "@mui/material";
 import ClearIcon from '@mui/icons-material/Clear';
 import EditIcon from '@mui/icons-material/Edit';
 import NoteAddIcon from '@mui/icons-material/NoteAdd';
-import React, { useState, useEffect, useContext } from "react";
+import React, { useState, useEffect, useContext, Fragment } from "react";
 import { useList, useOne } from "@refinedev/core";
 import { ResourceContext } from "../../contexts/ResourceContext";
 import { CrudForm } from "../crud-form";
@@ -95,22 +97,24 @@ const RealAutocomplete = <T = any, S extends ForeignKeySchema = ForeignKeySchema
         )}
       />
       <Modal
-            open={openFormModal}
+        open={openFormModal}
-            onClose={() => setOpenFormModal(false)}
+        onClose={() => setOpenFormModal(false)}
-            aria-labelledby="modal-modal-title"
+        aria-labelledby="modal-modal-title"
-            aria-describedby="modal-modal-description"
+        aria-describedby="modal-modal-description"
-          >
+      >
-            <FormContainer
+        <DialogContent>
-              schemaName={schema}
+          <FormContainer
-              resourceBasePath={basePath}
+            schemaName={schema}
-              resource={resource}
+            resourceBasePath={basePath}
-              uiSchema={{}}
+            resource={resource}
-              onSuccess={(data: any) => {
+            uiSchema={{}}
-                setOpenFormModal(false)
+            onSuccess={(data: any) => {
-                onChange(data.data.id);
+              setOpenFormModal(false)
-              }}
+              onChange(data.data.id);
-            />
+            }}
-          </Modal>
+          />
+        </DialogContent>
+      </Modal>
     </>
   );
 }
@@ -161,14 +165,16 @@ const ChosenValue = <T = any, S extends ForeignKeySchema = ForeignKeySchema, F e
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
       >
-        <FormContainer
+        <DialogContent>
-          schemaName={schema}
+          <FormContainer
-          resourceBasePath={basePath}
+            schemaName={schema}
-          resource={resource}
+            resourceBasePath={basePath}
-          uiSchema={{}}
+            resource={resource}
-          id={value}
+            uiSchema={{}}
-          onSuccess={() => setOpenFormModal(false)}
+            id={value}
-        />
+            onSuccess={() => setOpenFormModal(false)}
+          />
+        </DialogContent>
       </Modal>
     </>
   )
@@ -199,10 +205,9 @@ type FormContainerProps = {
 
 const FormContainer = (props: FormContainerProps) => {
   const { schemaName, resourceBasePath, resource, uiSchema = {}, id = undefined, onSuccess } = props;
-
   return (
     <Box sx={{ ...modalStyle, width: 800 }}>
-      <CrudForm schemaName={schemaName} resourceBasePath={resourceBasePath} resource={resource} uiSchema={uiSchema} id={id} onSuccess={onSuccess} />
+      <CrudForm schemaName={schemaName} resourceBasePath={resourceBasePath} resource={resource} uiSchema={uiSchema} id={id} onSuccess={(data) => onSuccess(data)} />
     </Box>
   )
 }
@@ -221,12 +226,12 @@ const Preview = (props: {id: string, resource: string, basePath: string, display
 
   return (
     <Grid2 container spacing={2}>
-      {displayedFields.map((field: string) => {
+      {displayedFields.map((field: string, index: number) => {
         return (
-          <>
+          <Fragment key={index}>
             <Grid2 size={2}><Container>{field}</Container></Grid2>
             <Grid2 size={9}><Container dangerouslySetInnerHTML={{ __html: data.data[field] }} ></Container></Grid2>
-          </>
+          </Fragment>
         )
       })}
     </Grid2>