Reactjs 获取更多数据后更新 DOM，而不刷新 React.js 中的页面

function UniversititesList() {
  const [loading, setLoading] = useState(false);
  const [listOfUnis, setListOfUnis] = useState([]);
  const [isSearched, setSearched] = useState(false);
  const lastElement = useRef();
  const observer = useRef();

  async function fetchAllUnis() {
    setLoading(true);
    const result = await SearchService.getAllUniversities(); //return of data from API
    setListOfUnis([...listOfUnis, ...result]);
    setLoading(false);
  }

  useEffect(() => {
    if(!listOfUnis.length) {
          fetchAllUnis();
    }
  }, [])

  useEffect(() => {
    if(loading) return;
    if(observer.current) observer.current.disconnect();
     const callback = (entries, observer) => {
      if(entries[0].isIntersecting) {
        fetchAllUnis()
      }
     }
     observer.current = new IntersectionObserver(callback);
     observer.current.observe(lastElement.current);
  }, [loading])

  const renderUniList() {

   if(loading) {
    return <div>Is loading...</div>
   }

   if(!loading && listOfUnis.length === 0) {
    return <div>No data available...</div>
   }

   return listOfUnis.map((uni) => 
   // return your prefered jsx element here
   )
  }

return (
    <section className='min-h-screen bg-slate-200 pt-[7%] '>
     <div className="uni-list">
     {renderUniList()}
     </div>
     <div className='w-full h-4' ref={lastElement}></div>
    </section>
  )
}