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 (
          props.value !== undefined &&
          props.defaultValue !== undefined &&
          !didWarnDefaultSelectValue
        ) {
          warning(
            false,
            'Select elements must be either controlled or uncontrolled ' +
              '(specify either the value prop, or the defaultValue prop, but not ' +
              'both). Decide between using a controlled or uncontrolled select ' +
              'element and remove one of these props. More info: ' +
              'https://fb.me/react-controlled-components',
          );
          didWarnDefaultSelectValue = true;
        }
      }
      this.currentSelectValue =
        props.value != null ? props.value : props.defaultValue;
      props = Object.assign({}, props, {
        value: undefined,
      });
    } else if (tag === 'option') {
      let selected = null;
      const selectValue = this.currentSelectValue;
      const optionChildren = flattenOptionChildren(props.children);
      if (selectValue != null) {
        let value;