How to properly set up the context and use "@pnp/sp" in Office Word add in

Question

Hi there, I have generated an Office word add-in the react-spfx template using yo man generator. I am trying to auto populate the word header with the managed properties and other metadata related to the document in SP library. But having trouble getting the right pnp context setup. Thank you.

export  const  getSP  = (context?: ISPFXContext): SPFI => {
  if (_sp === null && context !== null) {
    _sp = spfi().using(SPFx(context)).using(PnPLogging(LogLevel.Warning));
  }
  return _sp;
};