Provider interceptor uses cached values? about use-http HOT 4 CLOSED

const CustomProvider = ({ children }) => {
  const [token, setToken] = useLocalStorage('token')

  const getToken = async () => {
    return 'my-token'
  }

  const options = {
    interceptors: {
      request: async options => {
        if (!token) {
          const newToken = await getToken()
          setToken(newToken)
        }
        console.log('Interceptor called with token', token)
        options.headers['x-token'] = token
        return options
      },
    },
  }

  useEffect(() => {
    console.log('Logging token', token)
  }, [token])

  return (
    <Provider url={window.location.origin} options={options}>
      {children}
    </Provider>
  )
}

const TestFetch = () => {
  const [token] = useLocalStorage('token')

  const [request, response] = useFetch()

  useEffect(() => {
    async function getSomething() {
      console.log('Performing request with token in context as:', token)
      await request.get('/test.json')
      if (response.ok) console.log('Finished.')
    }
    getSomething()
  }, [])

  return (
    <>
      <span>Token is {token}</span>
    </>
  )
}

const App = () => {
  return (
    <TestProvider>
      <CustomProvider>
        <Snowflakes>
          <Center>
            <TestFetch />
          </Center>
        </Snowflakes>
      </CustomProvider>
    </TestProvider>
  )
}