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?


!didWarnInvalidOptionChildren &&
        typeof child !== 'string' &&
        typeof child !== 'number'
      ) {
        didWarnInvalidOptionChildren = true;
        warning(
          false,
          'Only strings and numbers are supported as <option> children.',
        );
      }
    }
  });
  return content;
}
const emptyObject = {};
if (__DEV__) {
  Object.freeze(emptyObject);
}
function maskContext(type, context) {
  const contextTypes = type.contextTypes;
  if (!contextTypes) {
    return emptyObject;
  }
  const maskedContext = {};
  for (const contextName in contextTypes) {
    maskedContext[contextName] = context[contextName];
  }
  return maskedContext;
}
function checkContextTypes(typeSpecs, values, location: string) {