change and merge yasi and mohamad code

src/components/TextFieldWithFnBox.jsx

@@ -3,7 +3,7 @@ import AlignHorizontalCenterIcon from '@mui/icons-material/AlignHorizontalCenter
 import {useState} from "react";
 // import FilterBox from "@/components/FiterBox";
 
-const TextFieldWithFnBox = ({formik, fieldName , label ,  defaultFilter , columnFilterModeOptions ,onSelectFilter}) => {
+const TextFieldWithFnBox = ({formik, id ,  defaultFilter , columnFilterModeOptions ,onSelectFilter}) => {
     const [anchorEl, setAnchorEl] = useState(null);
     const [open, setOpen] = useState(false);
 
@@ -20,9 +20,10 @@ const TextFieldWithFnBox = ({formik, fieldName , label ,  defaultFilter , column
     return (
         <>
             <TextField
-                name={fieldName}
-                label={label}
-                value={formik.values[fieldName]}
+                name={id}
+                label={id}
+                id={id}
+                value={formik.values[id]}
                 onChange={formik.handleChange}
                 fullWidth
                 margin="normal"