[Solved]-React Hook "useParams" is called in function "fetchMentors" that is neither a React function component nor a custom React Hook function-Reactjs

import React, { useState, useEffect } from 'react';
import Axios from "axios";
import {NavLink, useParams} from "react-router-dom";
import Spinner from '../../Spinner';

function MentorList() {
    const [categoriesResult, setCategoriesResult] = useState([]);
    const [mentorsResult, setMentorsResult] = useState([]);
    const [categoriesToId, setCategoriesToId] = useState({});
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');
    const { categoryId } = useParams();

    useEffect(() => {
        const fetchCategories = () => {
            Axios.get("https://localhost:4000/categories", {}).then((response) => {
                if (response.data.status === "ok") {
                    setCategoriesResult(Object.keys(response.data.result));
                    setCategoriesToId(response.data.result);
                    setLoading(false);
                } else {
                    setError(response.data.error);
                    setLoading(false);
                }
            }).catch(err => {
                console.dir(err);
                setError("There was an error signing you in. Please try again later.");
                setLoading(false);
            });
        };

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

        const fetchMentors = () => {
            console.dir('test');
            Axios.get("https://localhost:4000/view-by-category/" + categoryId, {}).then((response) => {
                if (response.data.status === "ok") {
                    setMentorsResult(Object.keys(response.data.result));
                    setLoading(false);
                } else {
                    setError(response.data.error);
                    setLoading(false);
                }
            }).catch(err => {
                console.dir(err);
                setError("There was an error with the request. Please try again later.");
                setLoading(false);
            });
        };
        
        if (categoryId) {
            fetchMentors();
        }
    }, [categoryId]);

    if (loading) {
        return <Spinner />;
    }

    if (mentorsResult && categoriesResult) {
        var mentors = mentorsResult.map(mentor => {
            return <div className="row">
                <p className="mentor-profile-name">{mentor.name}</p>
                <p className="mentor-profile-bio">{mentor.shortBio}</p>
                <NavLink to={`/mentor/${mentor.id}`} exact>View Profile</NavLink>
            </div>
        })
        var categories = categoriesResult.forEach(item => {
            return <div className="row"><NavLink to={`/mentors/${item.id}`} exact>{item.name}</NavLink></div>
        });

        return <div className="container">
            <div className="col-3">
                {categories}
            </div>
            <div className="col-9">
                {mentors}
            </div>
        </div>
    } else {
        return <div></div>;
    }
};
export default MentorList;