Correcting key position in looping component

gui/rpk-gui/src/lib/filter-form/components/filter-form.tsx

@@ -2,7 +2,7 @@ import TextField from "@mui/material/TextField";
 import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
 import Autocomplete from "@mui/material/Autocomplete";
 import { FirmContext } from "../../../contexts/FirmContext";
-import { useContext } from "react";
+import { Fragment, useContext } from "react";
 import { Box, Grid2, styled } from "@mui/material";
 import Stack from "@mui/material/Stack";
 import dayjs from "dayjs";
@@ -25,9 +25,9 @@ const FilterForm = (props: FilterFormProps) => {
   let currentValue = values
 
   const formField = fields.filter(f => f.name != "search").map((f, index) =>
-    <>
-      { f.name == "created_at" && <Box width="100%" key={`created_at_break-${index}`} /> }
-      <Grid2 size={6} key={`${f.name}-${index}`} >
+    <Fragment key={`${f.name}-${index}`} >
+      { f.name == "created_at" && <Box width="100%" /> }
+      <Grid2 size={6}>
         <FilterFormField
           field={f}
           value={values.hasOwnProperty(f.name) ? values[f.name] : {}}
@@ -53,7 +53,7 @@ const FilterForm = (props: FilterFormProps) => {
           }}
         />
       </Grid2>
-    </>
+    </Fragment>
   );
 
   return (