Passing a prop/variable to react router 6 loader function

My routes are working and accessing components and loader functions. I'm trying now to pass variable filmsPerPage (which is defined once) to both Home component and the loader function in

App.js:

const App = () => { 
  const filmsPerPage = 12
    
  const router = createBrowserRouter([
    {
      path: '/',
      children: [
        {
          index: true,
          element: <Home {...{filmsPerPage}} />,
    	  loader: () => { loaderHome(filmsPerPage) }
        },
        .................

Home.js:

const Home = (props) => {
  const { loaderData } = useLoaderData() // get loader data --> null
  console.log(props.filmsPerPage) // printing out correctly: 12
  .......
}
    
export default Home;
    
export function loaderHome(filmsPerPage) {
  console.log(filmsPerPage) --> printing out 12
  return defer({
    loaderData: loadPosts(null, 1, 12, null)
  })
}

The prop filmsPerPage is passing correctly to Home.js component and while it's passing to the loader function, the useLoaderData() in Home.js is returning null which means that although the code in the loader function is working properly, it's not returning a loader object to the component. If I do this in App.js, the useLoaderData() function (in Home.js) will get the data but now the loader function doesn't have the prop:

children: [
  {
    index: true,
    element: <Home {...{filmsPerPage}} />,
    loader: loaderHome
  },

How could I pass the filmsPerPage prop to the loader function which will then return loader data to Home.js?

The loader function isn't returning anything. Perhaps reformatted to a more readable format will make this more apparent:

{
  index: true,
  element: <Home {...{filmsPerPage}} />,
  loader: () => {
    loaderHome(filmsPerPage); // <-- not returned!!
  },
}

The loader should still return the result of calling loaderHome.

Examples:

{
  index: true,
  element: <Home {...{filmsPerPage}} />,
  loader: () => {
    return loaderHome(filmsPerPage); // <-- explicit return in function block
  },
}

{
  index: true,
  element: <Home {...{filmsPerPage}} />,
  loader: () => loaderHome(filmsPerPage), // <-- implicit arrow function return
}

You could even rewrite loaderHome to curry, e.g. close over in function scope, the filmsPerPage argument.

export function loaderHome(filmsPerPage) {
  console.log(filmsPerPage); --> printing out 12

  // Return loader function
  return (loaderArgs) => {
    return defer({
      loaderData:  loadPosts(null, 1, filmsPerPage, null);
    });
  };
}

{
  index: true,
  element: <Home {...{filmsPerPage}} />,
  loader: loaderHome(filmsPerPage),
}