I happened to notice that React will throw `Hooks can only be called inside the body of a function component` if a sibling element calls `ReactDOMServer.renderToStaticMarkup`. I have a [fiddle](https://jsfiddle.net/er4kL3of/) that shows this behavior (I think you need to manually open your console to see the error).

If you wrap the sibling element in a component or even just assign it a variable, this issue does not occur.

It's easy to get around and is a pretty specific bug, but why might this be happening?


if (__DEV__) {
    checkPropTypes(
      typeSpecs,
      values,
      location,
      'Component',
      getCurrentServerStackImpl,
    );
  }
}
function processContext(type, context) {
  const contextType = type.contextType;
  if (typeof contextType === 'object' && contextType !== null) {
    if (__DEV__) {
      if (contextType.$$typeof !== REACT_CONTEXT_TYPE) {
        let name = getComponentName(type) || 'Component';
        if (!didWarnAboutInvalidateContextType[name]) {
          didWarnAboutInvalidateContextType[type] = true;
          warningWithoutStack(
            false,
            '%s defines an invalid contextType. ' +
              'contextType should point to the Context object returned by React.createContext(). ' +
              'Did you accidentally pass the Context.Provider instead?',
            name,
          );
        }
      }
    }
    return contextType._currentValue;
  } else {