Как убрать анимацию при первом рендере?

Написал хук для анимации, но хочу убрать анимацию при первом рендере. Проблема в том, что анимации вообще нет, даже на втором рендере. Что не так? Если убрать проверку на первый рендер и по умолчанию добавить в стейт класс animate, то все нормально работает, но работает и с первым рендером.

export const useAnimateRoute = () => { 
    const [animationClass, setAnimationClass] = useState(''); 
    const isFirstRender = useRef(true); 
    const location = useLocation(); 
 
    useEffect(() => { 
        if (isFirstRender.current) { 
            isFirstRender.current = false; 
            return; 
        } 
 
        setAnimationClass('animate'); 
 
        const timeoutId = setTimeout(() => { 
            setAnimationClass(''); 
        }, 200); 
 
        return () => clearTimeout(timeoutId); 
    }, [location]) 
 
    return animationClass; 
}

App.js

<BrowserRouter> 
      <Routes> 
        <Route path="/" element={<Home />} /> 
        <Route path="/test/test2" element={<Test />} /> 
      </Routes> 
    </BrowserRouter>

Home.jsx, Test.jsx

const Home = () => { 
    const animationClass = useAnimateRoute(); 
 
    return ( 
        <div className={animationClass}> 
             <Link to='/test/test2'>123</Link>
        </div> 
    ) 
}

const Test = () => { 
    const animationClass = useAnimateRoute(); 
 
    return ( 
        <div className={animationClass}> 
            <h1>123</h1> 
        </div> 
    ) 
}