What is the role of ...props in the HOC in this code?

Question

React

Hello everyone, I have this HOC:

import React, { useState } from "react";
import ErrorMessage from "@components/ErrorMessage/ErrorMessage";
export const WithErrorApi = (View) => {
  return (props) => {
    const [errorApi, setErrorApi] = useState(false);
    const [isLoading, setisLoading] = useState(true);
    return (
      <>
        {errorApi ? (
          <ErrorMessage />
        ) : (
          <>
            <View
              setErrorApi={setErrorApi}
              setLoader={setisLoading}
              isLoading={isLoading}
              {...props}
            />
          </>
        )}
      </>
    );
  };
};

And there is such a component that uses it:

const PeoplePage = ({ setErrorApi, setLoader, isLoading }) => {
  const query = useQueryParams();
  const queryPage = query.get("page"); 
  const [people, setPeople] = useState(null);
  const [prevPage, setPrevPage] = useState(null);
  const [nextPage, setNextPage] = useState(null);
  const [counterPage, setCounterPage] = useState(1);
  const getResource = async (url) => {
    const res = await getApiResource(url);
    if (res) {
      const peopleList = res.results.map(({ name, url }) => {
        const id = getPeopleId(url);
        const img = getPeopleImg(id);
        return {
          id,
          name,
          img,
        };
      });
      setPeople(peopleList);
      setNextPage(res.next);
      setPrevPage(res.previous);
      setCounterPage(getPeoplePageId(url));
      setLoader(false);
      setErrorApi(false);
    } else {
      setErrorApi(true);
    }
  };
  useEffect(() => {
    getResource(API_PEOPLE + queryPage);
  }, []);
  return (
    <>
      <PeopleNavigation
        getResource={getResource}
        prevPage={prevPage}
        nextPage={nextPage}
        counterPage={counterPage}
      />
      {isLoading ? <Loader /> : ""}
      {people !== null && <PeopleList people={people} />}
    </>
  );
};

PeoplePage.propTypes = {
  setErrorApi: PropTypes.func,
};
export default WithErrorApi(PeoplePage)

The whole question is what is the role of ...props in my hock. Namely: 1) Why do we need this function return (props) =>// там остальной код ....Why don’t we immediately return the component with the data we need 2) where do these props come from if we didn’t specify them anywhere and what is their role in this code 3) what lies ...props in the code component

<View
              setErrorApi={setErrorApi}
              setLoader={setisLoading}
              isLoading={isLoading}
              {...props} // что тут лежит и зачем это нужно если из-вне у нас нету никаких пропсов ?
            />

The code is not mine, taken to familiarize yourself with the topic of hawks. Thank you !

Answer 1

const PeoplePageWithErrorApi = WithErrorApi(PeoplePage)

<PeoplePageWithErrorApi foo="bar"> 
// props = {foo: bar} 
// внутри PeoplePage props {
//  foo: 'bar', 
//  setErrorApi: setErrorApi из WithErrorApi, 
//  setLoader: setLoader из WithErrorApi, 
//  isLoading: isLoading из WithErrorApi
//}

Obviously, no?