While working on a project I noticed a weird behavior of the useLocation hook that I can`t find an explanation to.

I have a button that when clicked it will redirect you to an EditOrder page and will pass a state with it:

const navigate = useNavigate();

const handleClick = (data) => {
    navigate("edit-order", {state: {order: data}})
};

In the EditOrder page I check with a UseEffect hook if a state was provided and if not the user will be redirected to a different page:

const { state } = useLocation();

const navigate = useNavigate();

useEffect(() => {
    if (!state) {
        navigate("some-page");
    }
}, []);

The weird part is when I refresh the page I can still access it, and if I console.log(state.order) the data is still there, even when I reload with ctrl + shift + r the state stays the same, and this also happens with the empty cache and hard reload option (tried in both chrome and edge).

But when I copy the URL and past it in a new tab I immediately get redirected to "some-page" and console.log(state) will show null.

I checked both the cookies and local storage and I can't find the state data there.

Can someone explain why is this happening and how the state data is being saved?

Edit:

Here is a youtube video that shows this behavior.

The code on the video can be found in this sandbox, when you run the code on sandbox it runs as it should, on refresh all the states reset, but when running locally this problem occurs (on 2 different computers).

A git repo about location.state