delete unnecessary refetch and add a new component for the list filters

src/admin-components/resources/person/components/filter-name.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TextField } from '@mui/material';
+
+interface FilterNameProps {
+  setFirstName: (firstName: string) => void;
+}
+
+export const FilterName: FC<FilterNameProps> = ({ setFirstName }) => {
+  return (
+    <TextField
+      label="First name"
+      onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+        setFirstName(event.target.value);
+      }}
+    />
+  );
+};

src/admin-components/resources/person/components/index.ts

@@ -1 +1,2 @@
 export { ArrayField } from "./array-field.tsx";
+export { FilterName } from './filter-name.tsx';

src/admin-components/resources/person/list.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useState } from "react";
+import React, { Fragment, useState } from "react";
 import {
   BooleanField,
   Datagrid,
@@ -13,15 +13,14 @@ import {
   WrapperField,
 } from "react-admin";
 import { useQuery } from "@tanstack/react-query";
-import { ArrayField } from "./components";
+import { ArrayField, FilterName } from "@admin";
-import { TextField as MuiTextField } from "@mui/material";
 
 export const PersonList = () => {
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(25);
   const [firstName, setFirstName] = useState("");
   const dataProvider = useDataProvider();
-  const { data, isPending, refetch } = useQuery({
+  const { data, isPending } = useQuery({
     queryKey: ["personList", page, perPage, firstName],
     queryFn: () => {
       const httpParams = new URLSearchParams({
@@ -36,12 +35,6 @@ export const PersonList = () => {
     },
   });
 
-  useEffect(() => {
-    (async () => {
-      await refetch();
-    })();
-  }, [page, perPage]);
-
   return (
     <Fragment>
       <Title title="Users" />
@@ -90,14 +83,3 @@ export const PersonList = () => {
     </Fragment>
   );
 };
-
-const FilterName = ({ setFirstName }) => {
-  return (
-    <MuiTextField
-      label="First name"
-      onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-        setFirstName(event.target.value);
-      }}
-    />
-  );
-};