Получение данных из хука useAsyncValue

Прочитал в документации react-router-dom про возможность использования предзагрузки данных через загрузчик. Там указано что можно использовать хук. Попробовал, потестил с одним объектом данных, всё работает. Однако мне нужно подгрузить 2 объекта, написал следующий код:

export const eventLoader = async ({ params }: any) => {
    const id = Number(params.id);

    const result = {
        event: getEvent(id),
        ranks: getRanks(),
    };

    return defer({ data: result });
};

export const EditEventPage = () => {
    const { data } = useLoaderData() as IReturnTypesInit;
    return (
      <Suspense fallback={<h3 className={Style.heading}>Загрузка...</h3>}>
         <Await resolve={data}>
           <Event />
         </Await>
      </Suspense>);
};

const Event = () => {
  const { event, ranks } = useAsyncValue() as IReturnTypes;
  console.log(event, ranks);
  return (<>...</>)
}

По итогу данные успешно приходят в компонент Event, но приходят как promice, а это меня не очень устраивает. Т.е. если я изменю код и буду ожидать из загрузчика result, извлеку из него event, повешу его на resolve и в компоненте получу, то данные придут в том виде который мне нужен (без promice). Собственно, можно ли так вообще сделать и если это возможно то как это сделать? Может есть какие-то более правильные пути получения данных, чтобы не пришлось городить useEffect для получения данных?