How can I render components again after receiving data using axios in React.js?

Question

I am making a web application that fetches data from API using axios, and showes the data.
However, fetching API takes too long, so I used Loader component, and after the axios GET method is over, I wanted to show the fetched data.
But my problem is, it fetches with no errors, Loader works perfect, and after fetching is done, Loader goes off. But my mapped data does not render on web. How can I fix this problem?

  const [isLoading, setLoading] = useState(true);
  const [lunchData, setLunchData] = useState(mockServingData);

  useEffect(() => {
    axios.get(URL).then((response) => {
      setLunchData(response.data.menu[0].lunch);
      lunch = lunchData.lunch;
      setLoading(false);
    });
  }, []);
  

  if (isLoading) {
    return <div className="App"><Loader type="spin" color="RGB 값" message="Loading..." /></div>;
  }
  const lunchMenuList = lunch.map((menu, index) => (
    <li key={index}>{menu}</li>
  ));


  return (
    <div className="App">
      {lunchMenuList}
    </div>
  );

• I used var lunch just in development process, because mockServingData is not in the perfect form.