How to render an animation depending on state?

Question

I have a navbar that I need to animate using React Anime. Navbar contains Link component, which gets delay and duration as props.

Here's the code of navigation bar:

import React, {useContext, useState} from 'react'
import Link from '../Link'
import ImageLink from '../ImageLink'
import styles from './Navigation.module.css'
import { ThemeContext } from '../../theme'


let isPassed= false

export default function Navigation() {

    const theme = useContext(ThemeContext)

    return (
        <div className={styles.root} style={{"--height-after": 6 + 'px'}}>
            <div>
                <ImageLink
                    href="/"
                    alt="logo"
                    src={theme.name === 'light' ? '/images/logo/Logo.svg' : '/images/logo/LogoBlack.svg'}
                    className={styles.logo}
                    delay={3200}
                />
            </div>
            <div className={styles.item}>
                <Link
                    href="/contact"
                    duration={isPassed}
                    delay={2100}
                >
                    Contact
                </Link>
            </div>
            <div className={styles.item}>
                <Link
                    href="/about"
                    duration={isPassed === false ? 1500 : 0}
                    delay={2300}
                >
                    About us
                </Link>
            </div>
            <div className={styles.item}>
                <Link
                    href="/trails"
                    duration={isPassed === false ? 1500 : 0}
                    delay={2500}
                >
                    All trails
                </Link>
            </div>
        </div>
    )
}

Here's the code of the Link component:

import React from 'react'
import styles from './Link.module.css'
import NextLink from 'next/link'
import Anime from "react-anime";


export default function Link({ href, children, className, delay, duration }) {

    return (
        <Anime
            translateY={[-15,0]}
            opacity={[0,1]}
            duration={duration}
            delay={delay}
        >
            <NextLink href={href}>
                <a className={styles.link + ' ' + className}>{children}</a>
            </NextLink>
        </Anime>
    )
}

The task is to handle the animation state, and if the animation has been already passed in the current browser session, not to animate it on page reload.

My first idea was to use sessionStorage, but then I've decided to declare a new variable isPassed in the navbar component and animate links depending on its value. So... Can I somehow change isPassed value when the animation is passed