avoiding useless re renders while using useblocker

Reproduction

i will just leave this example in order for others who are searching for the same solution to come across this faster

System Info

.

Used Package Manager

npm

Expected Behavior

import { memo, useEffect, useMemo, useRef } from "react";
import { useBlocker } from "react-router";
import isEqual from "lodash/isEqual"

const NavigationBlocker = memo(() => {
	useBlocker((args) => {
		console.log("ShouldBlock", args);
		return false;
	});
	return null;
});

const Component = ({actionData}) => {
	const id = useRef(crypto.randomUUID());
	const prevProps = useRef(actionData);

	useEffect(() => {
		console.log("Previous props:", prevProps.current);
		console.log("Current props:", actionData);
		console.log("Props equal?", prevProps.current === actionData);
		prevProps.current = actionData;
	});
	useEffect(() => {
		console.log(`mounted`, id.current);
		return () => {
			console.log(`unmounted`, id.current);
		};
	}, []);

	const a = useMemo(() => {
		console.log("useMemo in main Component");
		return Math.random();
	}, []);

	console.log("Home component loaded with data:");
	return (
		<>
			<NavigationBlocker />
			<h1>Home tsx file {a}</h1>
		</>
	);
};

export default memo(Component, (prevProps, nextProps) => {
  return isEqual(prevProps, nextProps);
});

Actual Behavior

.