I am not a frontend expert, so excuse any stupidity in my question. So, the question is, how to organise router config so that props from parent component FieldFormats, which is just a list of available FieldFormat instances, to a child component FieldFormat using Outlet.
This is what I have at the moment (just an extract of full routerConfig):

{
            path: '/fieldformats',
            handle: {
                crumb: () => <Link to="/fieldformats">Field Formats</Link>
            },
            children: [
                {
                    index: true,
                    element: <FieldFormats />,
                    loader: async () => {
                        return getFieldFormats();
                    },
                },
                {
                    path: '/fieldformats/:id',
                    element: <FieldFormat />,
                    loader: async ({params}) => {
                        return params;
                    },
                    handle: {
                        crumb: (params) => <span>{params['id']}</span>
                    }
                }
            ]
          }

So, when going to /fieldformats the app renders FieldFormats and uses the data from getFieldFormats API call function executed in loader prop. When going to /fieldformats/138, it renders FieldFormat. So how would I arrange it differently to be able to provide data to FieldFormat with Outlet in parent FieldFormats ?

Tried creating FieldFormatsWrapper and putting it at the top and then pass on data to children FieldFormats and FieldFormat, but that way FieldFormat never got rendered.