¿Por qué mi componente AppBar MUI con estilo no cambia de estilo al cambiar de estado?

Estoy tratando de cambiar el color de la barra de la aplicación al desplazarse. Usé una función estilizada de MaterialUI para crear mi barra de aplicación. Verifiqué el valor del estado en la consola y cambia correctamente. Desafortunadamente, la barra de la aplicación no reacciona al cambio de estado de mi propiedad pasada en la función estilizada que se supone que es el desencadenante para el color de fondo del componente.

Aquí está el código de la función estilizada:

const AppBar = styled(MUIAppBar)(({ theme, scrollNav }) => ({
backgroundColor: !scrollNav ? ‘#E6EEF4 !important’ : ‘red !important’,
position: ‘fixed’,
color: ‘#232F3D’,
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(2),
}))

Aquí está el desencadenante para el cambio de estado:

const [scrollNav, setScrollNav] = useState(false)
const changeNav = () => {
setScrollNav(window.scrollY >= 96 ? true : false)
}
useEffect(() => {
window.addEventListener(‘scroll’, changeNav)
}, [])

Aquí es cómo paso el estado a la función estilizada: