OKTA react Sign-In-Widget unable to set token in Authorization while fetching API giving 401 after the application is left in browser for 2 days

I am using OKTA Sign-In-Widget in my application(react-frontend, .net core-backend). I have followed the exact OKTA developer examples to setup the authentication but there are few errors I have been noticing.

  1. If I leave my application in the browser for 2 days I am getting 401 on API call. The token is valid for a week, I can see token but that token is not been set up in Authentication if I check API call in Networks tab in console. I need to refresh the page to make it work. Looks like even if the token is valid application is not able to use the token and fetch API if i leave the application in the browser for 2 days.
    https://github.com/okta/okta-oidc-js/tree/master/packages/okta-react This is the same way I am fetching the token and using it for API call.
  2. The second bug is related to the first-one but
    As soon as the end user login to the application through OKTA i am fetching and displaying the name of the user login in my navbar using this.props.userInfo.name. This works fine but if I leave the application in the browser for sometime it gives me an error : this.props.userInfo.name of undefine even if token is valid so for now I have worked around by adding a condition in my checkAuthentication() method by redirecting to login of userInfo is undefined:
    if (authenticated && !this.state.userInfo) {
    const userInfo = await this.props.auth.getUser();
    if(userInfo === undefined) {
    this.setState({ authenticated, userInfo });

For now the 1st bug is high priority. Please reach out if more detail needed.
Thank you.