Ionic v5 (React w/ TypeScript): RouterComponent Props Handle Component Unmount on Back Navigation

I am having an issue with an object/date passed to a component on route with history.push, ex:

<IonRouterLink onClick={ (): void  => { history.push({ pathname: '/product-quantity', state: { product: result }  }) } }>
    <ButtonComponent>Calculate Quantity</ButtonComponent>

On the component that I am routing to I have the following:

const ProductQuantity: FunctionComponent<RouteComponentProps<{}, {}, Product>> = ({ location }: RouteComponentProps<{}, {}, Product>) => {

    const product = location.state.product;


The above works fine when navigating to said component, but when navigating back product becomes undefined and breaks the view throwing the following error:

There is a work around but doesn’t seem like a proper thing to do. By adding location.state?.product and doing the same thing to everything reference of a property from the product object, I can avoid this issue but it’s clunky.

I think what needs to happen is that on unmount the component doesn’t need re-render, I just know how to go about doing that or if it’s even possible.