Fetch received pending connections

import { useFetchReceivedPendingConnections } from "@sublay/react-js";
import { useAcceptConnection } from "@sublay/react-js";

function IncomingRequests() {
  const fetchReceivedPendingConnections = useFetchReceivedPendingConnections();
  const acceptConnection = useAcceptConnection();
  const [requests, setRequests] = useState([]);

  useEffect(() => {
    fetchReceivedPendingConnections({ page: 1 }).then((res) => {
      setRequests(res.data);
    });
  }, []);

  return (
    <ul>
      {requests.map(({ id, user }) => (
        <li key={id}>
          {user.name} wants to connect
          <button onClick={() => acceptConnection({ connectionId: id })}>Accept</button>
        </li>
      ))}
    </ul>
  );
}