It may be due to the way you have named your state variable. In react naming convention, only components are supposed to have capitalized names like UserName, so when you use {UserName} it may try to render it and hence the error UserName is not a function. try renaming your state variable (and the prop) to userName (with lowercase u) and see if it helps.

If you need to pass the variable many levels, you may want to use a state management library like zustand to make your life a lot easier than using context.