SharePoint webpart seemingly losing context after a certain amount of time

[cardinalpipkin]

First of all, love what the sp/pnp team are doing and you have my full support :)

Situation/Environment - I have an SPFX built webpart that uses:

• SharePoint Online
• sp/pnp v3.1.0
• sp/pnp spfx-controls-react v3.5.0
• rush-stack-compiler-4.2 v0.1.1
• The webpart is a form which allows a user to add/update to a SharePoint list item(s).

Problem: The webpart loads fine. After about 5 minutes of inactivity on the form when a user tries to update their form (Save and Close button) it shows:

Error: Error making HttpClient request in queryable [401] Unauthorized ::> 
POST https://mySite/items(103) 401 (Unauthorized)

We believe it might be the webpart losing context after a certain period of time and a token is not being renewed. This is a theory.

Point to note:

• The form can add/update successfully before this approximate (around 5 mins) amount of time.
• When the issue occurs the form is responsive and all the controls can be interacted with, but any request to SharePoint throws the error above.
• We have developed an SPO webpart using V2 sp/pnp and have not experienced the same issue.
• The error occurs when the webpart is deployed to single page on SPO
• All SPO permissions are correct and checked
• There is one workflow that changes permissions when an item is modified but we have disabled this and checked and the error still occurs
• This error occurs in SP workbench also
• We noticed in the network tab in Edge that the x-Request-digest shows that something has expired early but we are unsure that this is the cause.
• We have studied the documentation closely

We are establishing context like this:

We have a helper/utils file which provides this:

import { SPFI, spfi, SPFx } from "@pnp/sp";

let sp: SPFI;
export const SetContext = (context) => {
    sp = spfi().using(SPFx(context));
};

In the parent component we use:

React.useEffect(() => {
    Utils.SetContext(props.context);
    _getListItemsFromSP();
    getRoles();
  }, [
    currentUserLoginName,
    currentUserID
  ]);

  React.useEffect(() => {
    Utils.SetContext(props.context);
  }, [
  ]);

Previously we didn't use 2 useEffects, this is a failed attempt to make the context update more than once.

I hope that this is posted in the correct forum? And I don't believe it's a bug, but possibly the way we are establishing context with the new sp/pnp v3?