React Router 6 useLoaderData возвращает кэшированные данные

• Я использую простое клиентское приложение vite act.js (v18) с маршрутизатором React v6.
• В ответном маршрутизаторе dom версии 6.22.3 я использую компонент useFetcher fetcher.Form и вызываю fetcher.submit при изменении внутри формы.
• Это успешно изменило параметры запроса, и функция загрузчика родительского маршрута для компонента вызывается снова.
• Однако useLoaderData в этом маршруте по-прежнему возвращает старые данные дочерним компонентам.

Редактировать: Просто чтобы прояснить, сама функция загрузчика работает правильно в индексном маршруте и возвращает правильные пользовательские данные. Однако данные, возвращаемые внутри компонента через useLoaderData, неверны после вызовов fetcher.submit.

В соответствии с просьбой ниже приведена ссылка на ссылку codeSandbox, которая демонстрирует проблему: Ссылка на CodeSandBox

Ниже показано создание маршрутизатора:

const router = createBrowserRouter([
    {
        path: '/',
        element: <Root />,
        errorElement: <ErrorPage />,
        children: [
            { index: true, element: <Index />, loader: indexLoader },
        ],
    }
]);

const rootElement = document.getElementById('root');

if (rootElement) {
    ReactDOM.createRoot(rootElement).render(
        <React.StrictMode>
            <RouterProvider router = {router} />
        </React.StrictMode>
    );
} else {
    console.error("Element with ID 'root' not found in the document");
}

затем индексный маршрут:

import RangePicker from '../components/rangePicker';


export async function loader({ request }) {
    
    const url = new URL(request.url);
    const startDate = url.searchParams.get('startDate');
    const endDate = url.searchParams.get('endDate');
    // This gets called correctly on every fetcher.submit();
    const userData = await getUserData(startDate, endDate);

    return { userData };
}

export default function Index() {
    // userData if logged gets called once with new data, but
    // after that gets called again with old data
    const { userData } = useLoaderData();
    
    
    return (
        <>
            <div>
                <RangePicker />
            </div>
            <div>
                <User data = {userData} />
            </div>
        </>
    );
}

Ниже приведен компонент RangePicker:

import { addDays } from 'date-fns';
import { useState } from 'react';
import { DateRangePicker } from 'react-date-range';
import { useFetcher } from 'react-router-dom';

export default function RangePicker() {
    const [state, setState] = useState([
        {
            startDate: new Date(),
            endDate: addDays(new Date(), 7),
            key: 'selection',
        },
    ]);

    const fetcher = useFetcher();

    const handleDateRangeChange = (item) => {
        setState([item.selection]);
        const startDate = item.selection.startDate;
        const endDate = item.selection.endDate;
        //successfully triggers the loader for parent, but useLoaderData
        // still returns previous data.
        fetcher.submit(
            { startDate, endDate }
        );
    };

    return (
        <fetcher.Form>
            <DateRangePicker
                onChange = {handleDateRangeChange}
                moveRangeOnFirstSelection = {false}
                ranges = {state}
            />
        </fetcher.Form>
    );
}