React Context: Error: userState must be used within a UserProvider despite nested in Provider?

Question

I am following this great tut by Kent C. Dodds regarding usage React Context.

But I actually have this component nested within the provider so not sure why I am getti