Uncaught TypeError: users.map is not a function

Question

I'm using data grid in material ui.
I want to create a row as much as data from params.

example: (3) [{…}, {…}, {…}] ← from User.includes(:evaluations).where(user_evaluations: { evaluation_id: 6 }).order('users.updated_at DESC')

So I came up that best solution is using map method.
But I got the following error..

Uncaught TypeError: users.map is not a function

The code:

useEffect(() => {
    axios
      .get(`${process.env.REACT_APP_ENDPOINT}/admin/users`, {
        headers: {
          "access-token": access_token!,
          client: client!,
          uid: uid!,
        },
      })
      .then((response) => {
        console.log(response.data.created_at);
        console.log(response.data.data);
        setUsers(response.data.data);
      })
      .catch(() => {
        dispatch(setSessionTimeout(true));
        dispatch(setLoggedIn(false));
        navigate("/");
      });
  }, []);

  const columns: GridColDef[] = [
    { field: "id", headerName: "ID", width: 70 },
  ];

  const rows = users.map((row: any) => ({
    id: row.id,
  }));

...
    <DataGrid
       rows={users}
       columns={columns}
       checkboxSelection
       className={classes.data_grid_styles}
       pageSize={pageSize}
       rowsPerPageOptions={[15, 30, 50]}
       onPageSizeChange={(newPageSize) =>
       setPageSize(newPageSize)
       }/>

content of response.data.data is:

0: {id: 1392, email: '[email protected]', image: null, name_sei: 'テストああ', name_mei: 'name', …} 1: {id: 1391, email: '[email protected]', image: null, name_sei: 'テスト', name_mei: 'name', …} 2: {id: 1387, email: '[email protected]', image: null, name_sei: 'あ', name_mei: 'あ', …} length: 3 [[Prototype]]: Array(0)

What the code wrong is?
And if you know better solution about:

So I came up that best solution is using map method.

Let me know. Please help me..

Answer 1

I fixed it!!

Before:

const [users, setUsers] = React.useState(Object);

After:

const [users, setUsers] = React.useState([]);