I am very new to react, and am trying to fetch data and map it onto the screen each time certain button is clicked:

  const fetchMessages = async (num) => {
      const response = await fetch([url] + num)
      const menuResponse = await response.json()
      console.log(menuResponse)
      setMenulist(menuResponse);
  }

The button click passes in a certain number appended to the end of a url (just called [url] for privacy), which then fetches array data from the server based on the number passed in. The correct menuResponse array is printed in the console. Lastly, it calls a useState function to change the menulist into the correct menuResponse array.

        <div className="menu">
          {useEffect(() => {
            menulist[section].map((menuItem) => {
              console.log("Inside Map: " + menuItem);
              <MenuCard mItem={menuItem}></MenuCard>
          })
          }, [menulist])}
        </div>

Inside this block, the correct menu items are being printed into the console, however nothing is mapped on the screen and I am not sure what is happening. When I get rid of the surrounding useEffect the original render works, but any other button click results in an error “Cannot read properties of undefined (reading ‘map’)”. Could anyone please help?