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?


currentDebugStacks.push(stack);
    if (currentDebugStacks.length === 1) {
      
      
      prevGetCurrentStackImpl = ReactDebugCurrentFrame.getCurrentStack;
      ReactDebugCurrentFrame.getCurrentStack = getCurrentServerStackImpl;
    }
  };
  pushElementToDebugStack = function(element: ReactElement) {
    
    const stack = currentDebugStacks[currentDebugStacks.length - 1];
    
    const frame: Frame = stack[stack.length - 1];
    
    ((frame: any): FrameDev).debugElementStack.push(element);
    
    
    
  };
  popCurrentDebugStack = function() {
    currentDebugStacks.pop();
    if (currentDebugStacks.length === 0) {
      
      
      ReactDebugCurrentFrame.getCurrentStack = prevGetCurrentStackImpl;
      prevGetCurrentStackImpl = null;
    }
  };
  getCurrentServerStackImpl = function(): string {
    if (currentDebugStacks.length === 0) {