React: the React State Hook does not change the value of the state variable

Question

the case

I wrote a piece of code changing the state of a variable when the onClick event is triggered

Unfortunately it State change is NOT taken into account

Do you have an idea?

thank you for the time you will invest in this issue

the definition of the state variable in "browse_movie_db.js"

export function BrowseMovieDBContainer({ slides }) {
  const [category, setCategory] = useState("movie");
....
}

Hook triggered when the category is updated in "browse_movie_db.js"

 useEffect(() => {
    console.warn("usecategory has changed to ", category);
  }, [category]);

the code containing the onClick in "browse_movie_db.js"

return profile.displayName ? (
    <>
      {loading ? <Loading src={user.photoURL} /> : <Loading.ReleaseBody />}

      <Header>
        <Header.Frame>
          <Header.Group>
            <Header.Logo to={ROUTES.HOME} src={logo} alt="AltFlow" />
            <Header.TextLink
              active={category === "tv" ? "true" : "false"}
              onClick={() => {
                console.warn("setCategory(tv)");
                setCategory("tv");
                console.warn("new category: ", category);
              }}
            >
              TV Series
            </Header.TextLink>
            <Header.TextLink
              active={category === "movie" ? "true" : "false"}
              onClick={() => {
                console.warn('setCategory("movie")');
                setCategory("movie");
                console.warn("new category: ", category);
              }}
              >
              Movies
            </Header.TextLink>
          </Header.Group>
     
      </Header.Frame>
     </Header>

   </>
  ) : (
    <SelectProfileContainer user={user} setProfile={setProfile} />
  );
}

the logs output