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?


}
        const child = frame.children[frame.childIndex++];
        if (__DEV__) {
          pushCurrentDebugStack(this.stack);
          
          ((frame: any): FrameDev).debugElementStack.length = 0;
          try {
            
            out += this.render(child, frame.context, frame.domNamespace);
          } finally {
            popCurrentDebugStack();
          }
        } else {
          
          out += this.render(child, frame.context, frame.domNamespace);
        }
      }
      return out;
    } finally {
      ReactCurrentOwner.currentDispatcher = null;
    }
  }
  render(
    child: ReactNode | null,
    context: Object,
    parentNamespace: string,
  ): string {
    if (typeof child === 'string' || typeof child === 'number') {
      const text = '' + child;
      if (text === '') {