error page

import React, { useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { clearErrorsAction } from "../../store/actions/sr-autoActions";
import { clearOCMErrorsAction } from "../../store/actions/ocm-jobActions";

const ErrorFetchingData = () => {

    const navigate = useNavigate();
    const dispatch = useDispatch();

    const goBack = () => navigate(-1);

    useEffect(() => {
        dispatch(clearErrorsAction());
    }, []);

    useEffect(() => {
        dispatch(clearOCMErrorsAction());
    }, []);

    return (
        <div className="mx-auto my-4 py-4">
            <h5 className={`text-red-600`}>An error occurred while trying to retrieve the data</h5>
            <button onClick={ goBack } className="BS_button_standard hover:bg-gray-400 mt-5">
                    <span className={`text-gray-700`}>Go back</span>
            </button>
        </div>
    );
}

export default ErrorFetchingData;