why I get this eslint error ?

React Hook useEffect has a missing dependency: 'navigate'. Either include it or remove the dependency array.

I dont want to put the navigate it there because on every navigate function it would be called. I only want to call it when the auth state changes so I added the auth variable in the dependencies but eslint say I have to use navigate function also in dependencies but why ? and how can I solve this error ?

code:

import { Route, Routes, useNavigate } from "react-router-dom"
import Login from "./pages/login"
import PasswordResetConfirm from "./components/PasswordResetConfirm/PasswordResetConfirm"
import useAuth from "./hooks/useAuth"
import { Index } from "./pages";
import { useEffect } from "react";
import Holidays from "./pages/holidays";

function App() {
  const navigate = useNavigate();
  const { auth } = useAuth();

  useEffect(() => {
    if(!auth) {
      console.log(auth);
      navigate('/login');
    }
  }, [auth]);
  return (
    <Routes>
      { !auth ? 
        <>
          <Route path="/reset_password" element={<PasswordResetConfirm />} />
          <Route path="/login" element={<Login />} />
        </>
        :
        <>
          <Route path="/" element={<Index />} />
          <Route path="/holidays" element={<Holidays />} />
        </>
      } 
    </Routes>
  )
}

export default App