أريد عرض رسالة خطأ في واجهة المستخدم إذا فشلت الاستجابة من الـ API في مشروع React.js

قمت بإنشاء مكون pagination استنادًا إلى عدد السجلات المستلمة من الواجهة البرمجية API ، وهو يعمل بشكل جيد في حالة فشل الواجهة البرمجية أو عدم توفر أي استجابة، ولكن الصفحة تتعطل.

أتوقع أنه عندما لا تكون هناك استجابة من الواجهة البرمجية، يجب عرض رسالة خطأ في واجهة المستخدم تقول "لا توجد سجلات متاحة"، فحاليًا إذا فشلت الواجهة البرمجية، يصبح إجمالي عدد الصفحات المعرف داخل وظيفة paginationRange وآخر صفحة غير معرف والصفحة تتعطل.

const DepositRates = () => {
    const [nriRates, setNriRates] = useState([]);
    const [currentPage, setCurrentPage] = useState(1);
    const getNriRates = async () => {
        try {
            const res = await axios.get(`API_URL`, {

            })
            setNriRates(res?.data?.data);
        }
        catch (err) {
            console.log("nri rates ", err);
        }
    }
    useEffect(() => {
        getNriRates();
    }, []);
    const range = (start, end) => {
        let length = end - start + 1;
        return Array.from({ length }, (_, idx) => idx + start);
    };
    const paginationRange = () => {
        const totalPageCount = Math.ceil(nriRates.length / 10);
        return range(1, totalPageCount);
    }
    let lastPage = paginationRange()[paginationRange().length - 1]
    return (
        <>
            <table>
                <thead>
                    <tr>
                        <th>Bank Name</th>
                    </tr>
                </thead>
                <tbody>
                    {nriRates.slice((currentPage - 1) * 10, currentPage * 10)?.map(item =>
                        <tr>
                            <td>{item.BankName}</td>
                        </tr>)}
                </tbody>
            </table>
            <div className="pagination">
                {currentPage !== 1 &&
                    <a
                        style={{ cursor: "pointer" }}
                        onClick={() => setCurrentPage(currentPage - 1)}>
                        <i className="previous"></i>
                    </a>
                }
                {paginationRange().map((page) => {
                    return (
                        <a
                            style={{ cursor: "pointer" }}
                            onClick={() => setCurrentPage(page)}
                            className={currentPage === page ? "active" : ""} >
                            {page}
                        </a>
                    )
                })}
                {currentPage !== lastPage &&
                    <a
                        style={{ cursor: "pointer" }}
                        onClick={() => setCurrentPage(currentPage + 1)}>
                        <i className="next"></i>
                    </a>
                }
            </div>
        </>
    )
}