After reading the docs for useState and useEffect I cant figure out what i'm doing wrong here... Im trying to dynamically update my h1 title with an updated title when a tab is clicked, however the state will not update so my title wont rerender.

This is my subheader component which takes in an array of objects as props. These objects are iterated over and used to populate the subnav bar. (which works as intended).

```
const Subheader = (props) => {
    const {
        submenuItems = []
    } = props;

    // State
    const  [pageTitle, setPageTitle] = useState(submenuItems[0].name); //Sets starting value as the first item of my submenu which is also the default route so works as intended.

    const handleMenuItemClick = (name) => {
            setPageTitle(name)
            console.log(name) //This prints out the updated expected value
            console.log(pageTitle) //This prints out the original not updated value

    }

    const submenuItemsJSX = submenuItems.map((item, index) => {
        return (
                <li
                key={index}
                to={item.to}
                onClick={() => handleMenuItemClick(item.name)}
                >
                  <a>
                    {item.name}
                  </a>
                </li>
        )
    });

    useEffect(() => {
      console.log(pageTitle) //This prints out the original not updated value
    }, [pageTitle])

    return (
      <div>
        <div>
          <h1>
            {pageTitle}  //This is what i want to update
          </h1>
        </div>
        <div>
          <ul>
            {submenuItemsJSX}
          </ul>
        </div>
      </div>
    )
}

export default Subheader

```

a sample of whats coming in through the subMenuItems:

```
{name: 'Categories', to: '/settings/categories', buttons: [] }

```