Focus on current page ui, opacity on active

import { NavLink, useLocation } from 'react-router-dom'

//own hook
const useIsFocused = () => {
    const location = useLocation();
    return location.pathname
}

const Navbar = () => {

    const isFocused = useIsFocused();

return (
        <div className='h-screen flex flex-col bg-[#1C465E]'>
            <div className='bg-PeppsLogo h-20 w-20 bg-no-repeat  place-self-center bg-center'></div>
            <ul className='flex flex-col flex-start h-72 w-20 text-white content-between justify-around'>

                <li >
                    <NavLink to='/dashboard' style={({ isActive }) => (isActive ? { opacity: 1 } : { opacity: 0.5 })}>
                        <div className='flex'>
                            <div  >
                                {isFocused === '/dashboard' ? <svg width="6" height="46" viewBox="0 0 6 46" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect width="6" height="46" fill="white" />
                                </svg> : <svg className='invisible' width="6" height="46" viewBox="0 0 6 46" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect width="6" height="46" fill="white" />
                                </svg>
                                }
                            </div>

</NavLink>
</li>
</ul>
</div>
)
}