Clicking the same Link element more than once doubles the url params when using with an onClick function that updates state. Removing the onClick makes the Link function as expected.

Expected path examples:

/newsletters/group/draft
/newsletters/draft
/dynamic/draft

Getting:

/newsletters/group/draft/newsletters/group/draft
/newsletters/draft/newsletters/draft
/dynamic/draft/dynamic/draft

Review Component

//group and status are props from parent

const handleClick = () => {
        if (filteredNewsletters.length > 0) {
            setSelectedNewsletters([])
            setSelectedIssue(null)
        }
    }
    return (
        <Link
            to={
                group
                    ? `/newsletters/${encodeURIComponent(group.toLowerCase())}/${status.toLowerCase()}`
                    : dynamic
                    ? `/dynamic/${status.toLowerCase()}`
                    : `/newsletters/${status.toLowerCase()}`
            }
            onClick={handleClick}
        >
            {status}
        </Link>
    )

Router

const App = () => {
    const router = createBrowserRouter([
        {
            path: '/:type/:group?/:status',
            element: <Review />,
            errorElement: <PageNotFound />,
            children: [
                {
                    index: true,
                    element: <SelectionsMessage />,
                },
                {
                    path: 'send/:sendId',
                    element: <Preview />,
                },
            ],
        },
        {
            path: '/edit/articles',
            element: <EditArticles />,
        },
        {
            path: '/edit/ads',
            element: <EditAds />,
        },
        {
            path: '*',
            element: <PageNotFound />,
        },
    ])

    return (
        <>
            <NewslettersProvider>
                <SelectedNewslettersProvider>
                    <DialogProvider>
                        <RouterProvider router={router} />
                        <Dialog />
                    </DialogProvider>
                </SelectedNewslettersProvider>
            </NewslettersProvider>
        </>
    )
}

export default App

I’ve tried moving the onClick to another element but with the same result. Removing the onClick altogether resolves the issue but then I am unsure how I would update the states as needed.