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?


warning(
          tag === element.type,
          '<%s /> is using incorrect casing. ' +
            'Use PascalCase for React components, ' +
            'or lowercase for HTML elements.',
          element.type,
        );
      }
    }
    validateDangerousTag(tag);
    let props = element.props;
    if (tag === 'input') {
      if (__DEV__) {
        ReactControlledValuePropTypes.checkPropTypes('input', props);
        if (
          props.checked !== undefined &&
          props.defaultChecked !== undefined &&
          !didWarnDefaultChecked
        ) {
          warning(
            false,
            '%s contains an input of type %s with both checked and defaultChecked props. ' +
              'Input elements must be either controlled or uncontrolled ' +
              '(specify either the checked prop, or the defaultChecked prop, but not ' +
              'both). Decide between using a controlled or uncontrolled input ' +
              'element and remove one of these props. More info: ' +
              'https://fb.me/react-controlled-components',
            'A component',
            props.type,