Navigating to a new URL blows away all my query data

[mdodge-ecgrow]

I cannot figure out why this is happening. I have a page that displays a table of pricelists. When you click on a pricelist, it opens up a sliding modal with that pricelist in it. That was all working fine and dandy until we decided we wanted to have a specific URL to open a specific pricelist. So now when we click on a pricelist, it changes the url from 'pricelists/active' to 'pricelists/active/12'. And then in my pricelists component I have this code:

let {id} = useParams();
...
useEffect(() => {
		if (id && !editingPriceList.id && !openEditPriceListModal) {
			setCreating(false);
			const thePriceList = priceLists?.all.find((pl) => pl.id === id);
			if (thePriceList) {
				setEditing(true);
				setEditPriceListName(thePriceList.name);
				setEditingPriceList(thePriceList);
				setOpenOptionsBoxModal(false);
				setOpenEditPriceListModal(true); // <-- this slides open the modal with the pricelist
			}
		}
	});

And that part is working fine. However when I close the sliding modal I call navigate('/pricelists/active'); and whenever that call is made, all my query data in the react-query dev tools goes away. I cannot figure out why that is happening.
This query in the pricelists component should be showing query data:

const {
		data: priceLists,
		isLoading: gettingPriceLists,
		status: priceListsStatus
	} = useQuery<PriceListType[] | undefined>({
		queryKey: ['allPriceLists', status],
		select: (data: PriceListFromDBType) => {
			const allHeadings = data?.headings || [];
			const all: PriceListType[] = data.priceLists
				.map((pl) => {
					return {
						...pl,
						createdDate: getFormattedDateForInput(
							new Date(pl.createdDate),
							true,
						),
						updatedDate: getFormattedDateForInput(
							new Date(pl.updatedDate),
							true
						),
						headings: allHeadings.filter((h) => h.priceListID.toString() === pl.id) || []
					};
				});

			return {
				all,
				filtered:
					priceListFilter.length >= 3
						? all.filter((p) =>
							p.name
								.toLowerCase()
								.includes(priceListFilter.toLowerCase())
						)
						: all
			};
		}
	});
	console.log({priceLists});
	```
Funny thing is I am seeing the pricelists data in that console log when I close the modal.

P.S. Also, if there is a better way to handle the whole modal showing a pricelist with a specific URL, I would love to hear it.  How I am doing it currently feels kinda dirty.

[mdodge-ecgrow]

I figured it out. I needed to pass another variable into the query key. I thought it was blowing everything away, because the screen in the react query dev tools was going blank after I would navigate.