To use this for a Layout, you have two examples. One option is to just set content to a particular component (content: <WelcomeComponent name="Arunoda" />) and the other is to set content to a function returning the component (content: () => (<WelcomeComponent name="Arunoda" />)).
You mention that this second option is to use the React context but what is that? Why is this necessary? They seem to both result in the same thing