{ useTranslation } from "react-i18next" library don't work - reactjs

Question

enter code here
Compiled with problems:X
ERROR
[eslint]
src\Components\menu.js
Line 20:25: React Hook "useTranslation" is called in function "menu" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks
Line 20:25: 'useTranslation' is not defined no-undef
Search for the keywords to learn more about each error.
import { NavLink } from 'react-router-dom';
import { FaBeer } from 'react-icons/fa';
import { RiStore2Line, RiApps2Line, RiWallet3Line, RiPulseLine } from "react-icons/ri";
import { FaUsersCog } from "react-icons/fa";
import './menu.scss'
import { BsCashStack,BsCreditCard2Back } from "react-icons/bs";
// get url path and set active class
const active = (path) => {
if (path in window.location.pathname) {
return 'active';
}
return '';
}
const menu = () => {
const { t, i18n } = useTranslation();
return <div className="menuP">
<div className="menu">
<NavLink to={'/admin/dashboard'} className={active+' dashboard'}>
<RiStore2Line size={28} /> <span>dashboard</span>
</NavLink>
<NavLink to={'/admin/project'} className={active+' project'}>
<RiWallet3Line size={28} /> <span>project</span>
</NavLink>
<NavLink to={'/admin/category'} className={active+' category'}>
<RiApps2Line size={28} /> <span>category</span>
</NavLink>
<NavLink to={'/admin/user'} className={active+' user'}>
<FaUsersCog size={28} /> <span>users</span>
</NavLink>
</div>
</div>
}
export default menu;
header
import './Header.scss'
import { NavLink } from 'react-router-dom';
import React, { useContext } from 'react';
import { GoogleLogout } from 'react-google-login';
import { ThemeContext } from '../App';
import { BsCashStack,BsCreditCard2Back } from "react-icons/bs";
import { useTranslation } from "react-i18next";
const Header = () => {
const Theme = useContext(ThemeContext);
const clientId = "401-yb.apps.googleusercontent.com";
// logout function
const logout = () => {
Theme.setUser(null);
localStorage.removeItem('user');
}
const { t, i18n } = useTranslation();
const changeLanguage = (lng) => {
i18n.changeLanguage(lng);
}
return (
<header>
<NavLink to={'/'} className="logo">
Shop
</NavLink>
<div className="menu">
<nav>
<button className="btn btn-primary" onClick={() => changeLanguage('en')}>English</button>
<button className="btn btn-primary" onClick={() => changeLanguage('ar')}>Arabic</button>
<div className="fext">
{
// if user is admin show admin menu
Theme.user != null && Theme.user.isAdmin === true ?
<div className="admin">
<NavLink to={'/admin/dashboard'} className='dashboard'><span>✏</span> <p>{t("dashboard")}</p></NavLink>
<NavLink to={'/admin/bill'} className='bill'><span>✏</span> <p>{t('bill')}</p></NavLink>
<NavLink to={'/admin/customer'}><span><BsCreditCard2Back/></span> <p>{t('customer')}</p></NavLink>
<NavLink to={'/casher'}><span><BsCashStack/></span> <p>{t('cashier')}</p></NavLink>
</div>
: null
}
<NavLink to={'/cart'}> <img src="/cart.png" alt="" /> <span className='cartN'>{Theme.cart.reduce((total, item) => total + item.quantity, 0)}</span></NavLink>
</div></nav>
</div>
</header>
)
}
export default Header