Почему мое состояние не становится ложным, когда я нажимаю кнопку закрытия в меню? ⇐ CSS

[Anonymous]

Несмотря на то, что я инициализирую свое состояние как false, когда я открываю и закрываю меню, оно никогда не становится ложным, поэтому анимация закрытия NavBar никогда не запускается, и я не знаю почему.
Компонент:

Код: Выделить всё

import CloseButton from "./CloseButton"
import { useEffect, useState } from "react"

export const NavBar = ({ state, setStateFunction }: { state: boolean, setStateFunction: (value: boolean) => void }) => {
useEffect(() => {
console.log(state);
}, [state]);
return (

 {setStateFunction(false)}}>


[list]
[*][url=/auth/login]
{/*  */}
[/url]


{/*  */}




)
}

Мой index.tsx:

Код: Выделить всё

import { Inter } from "next/font/google";
import { NavBar } from "./components/NavBar";
import { useState } from "react";

const inter = Inter({ subsets: ["latin"] });

export default function Home() {
const [asideBar, setAsideBar] = useState(false);

return (

  setAsideBar(true)} className="mr-4">
Open the sidebar


 setAsideBar(false)} className="mr-4">
close sidebar


{asideBar && }

);
}

Я пытался изменить состояние несколькими способами, я пробовал переключать, на самом деле состояние не менялось напрямую, я не знаю, неправильно ли условие, которое у меня есть в компоненте, или если это что-то другое

Подробнее здесь: https://stackoverflow.com/questions/783 ... on-my-menu