useEffect and useState and API

I'm obtaining this data from the backend (successfully) and want to display it, first the names (chatName) in the divs. I don't know where the problem is but the said error run over and over??
THE ERROR

Uncaught runtime errors:
×
ERROR
setChats is not a function
TypeError: setChats is not a function
    at fetchData (http://localhost:3000/main.528b87f895a6cd643323.hot-update.js:37:5)
ERROR
setChats is not a function
TypeError: setChats is not a function
    at fetchData (http://localhost:3000/main.528b87f895a6cd643323.hot-update.js:37:5)

MY CODE

import React, { useEffect, useState } from "react";
import axios from "axios";
const Chats = () => {
  const { chats, setChats } = useState([]);
  const fetchData = async () => {
    const { data } = await axios.get("/api/chats");

//console.log(data) consoles the data

    setChats(data);
  };

  useEffect(() => {
    fetchData();
  });
  return (
    <>
      {typeof chats !== "undefined" ? (
        <div>
          {chats.map((d) => (
            <div key={d}>{d.chatName}</div>
          ))}
        </div>
      ) : (
        <div>Loading...</div>
      )}
    </>
  );
};

export default Chats;

I want to sort the data in the array using map() or forEach() funtions but they are either undefined or setChats is not a function.
Help display the data once the page is rendered for the first time...thank you,
API data

0
: 
{isGroupChat: false, users: Array(2), _id: '617a077e18c25468bc7c4dd4', chatName: 'John Doe'}
1
: 
{isGroupChat: false, users: Array(2), _id: '617a077e18c25468b27c4dd4', chatName: 'Guest User'}
2
: 
{isGroupChat: false, users: Array(2), _id: '617a077e18c2d468bc7c4dd4', chatName: 'Anthony'}
3
: 
{isGroupChat: true, users: Array(3), _id: '617a518c4081150716472c78', chatName: 'Friends', groupAdmin: {…}}
4
: 
{isGroupChat: false, users: Array(2), _id: '617a077e18c25468bc7cfdd4', chatName: 'Jane Doe'}
5
: 
{isGroupChat: true, users: Array(3), _id: '617a518c4081150016472c78', chatName: 'Chill Zone', groupAdmin: {…}}

React useState function returns an array not an object, so you have to use [ ] instead of { } in destructuring assignment

Look at your useState:

const { chats, setChats } = useState([]);

and change it to

const [chats, setChats] = useState([]);

UPD:

I also see you fetch data in useEffect. I recommend you to add an empty array as a second parameter of useEffect function if you want to call fetch function only once when component mounted. Otherwise it will fetch data on every re-render.

useEffect(() => {
  fetchData();
}, []);