map is not a function after axios delete request - reactjs

Question

When I use map function for the following code, after deleting an user, I get an error: map is not a function.
import React, { useEffect } from 'react';
import useAxiosFunction from "../../hooks/useAxiosFunction";
import axios from 'axios'
const UsersList = () => {
const [users, error, loading, axiosFetch] = useAxiosFunction();
const getData = () => {
axiosFetch({
axiosInstance: axios,
method: 'get',
url: 'http://localhost:3500/users'
});
}
useEffect(() => {
getData();
// eslint-disable-next-line
}, [])
const handleDelete = (id) => {
axiosFetch({
axiosInstance: axios,
method: 'delete',
url: 'http://localhost:3500/users',
requestConfig: {
data: {
id: id
}
}
});
}
const content = (
<div>
<h1> USERS LIST </h1>
{loading && <p>Loading...</p>}
{!loading && error && <p className="errMsg">{error}</p>}
{!loading && !error && users?.length &&
<ul>
{ users.map((user, i) => (<li key={user._id}>{`${user.username}`}<button onClick={() => handleDelete(user._id)}>BUTTON</button></li>)) }
</ul>
}
{!loading && !error && !users?.length && users?.data &&
<p>{`userId: ${users.data?.userId}, title: ${users.data?.title}, body: ${users.data?.body}`}</p>}
{!loading && !error && !users && <p>No users to display</p>}
</div>
)
return content
}
export default UsersList
my useAxiosFunction.js
import { useState, useEffect } from "react";
const useAxiosFunction = () => {
const [response, setResponse] = useState([]);
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const [controller, setController] = useState();
const axiosFetch = async (configObj) => {
const {
axiosInstance,
method,
url,
requestConfig = {}
} = configObj;
try {
setLoading(true);
const ctrl = new AbortController();
setController(ctrl);
const res = await axiosInstance[method.toLowerCase()](url, {
...requestConfig,
signal: ctrl.signal
});
console.log(res);
setResponse(res.data);
} catch (err) {
console.log(err.message);
setError(err.message);
} finally {
setLoading(false);
}
}
useEffect(() => {
console.log(controller)
// useEffect cleanup function
return () => controller && controller.abort();
}, [controller]);
return [response, error, loading, axiosFetch];
}
export default useAxiosFunction
I've added:
{ Array.isArray(users) && users?.map((user, i) => (<li key={user._id}>{${user.username}}<button onClick={() => handleDelete(user._id)}>BUTTON</button></li>)) }
to check if users is array and it's not rendering until getData() is called again.
I can't understand why it map function works after refresh but not after deleting an user.