The latest version of Chrome and Safari support `hr` elements as children of `select` elements, and the HTML spec has been updated – but React warns about this as it used to be invalid HTML.

- https://developer.chrome.com/blog/hr-in-select
- https://webkit.org/blog/14445/webkit-features-in-safari-17-0/#:~:text=Horizontal%20rules%20inside%20select%20elements
- https://html.spec.whatwg.org/#the-select-element-2:~:text=Zero%20or%20more%20option%2C%20optgroup%2C%20hr%2C%20and%20script%2Dsupporting%20elements.
- https://html.spec.whatwg.org/#the-select-element-2:~:text=Occasionally%20it%20can%20be%20useful%20to%20have%20a%20separator%3A

<img width="800" height="811" src="https://wd.imgix.net/image/HodOHWjMnbNw56hvNASHWSgZyAf2/55LrQnjhGNU5h22nq2PK.jpg?auto=format" 
 alt="Screenshot of before and after with hr in select. The after image has dividers between groups.">

React version: `18.2.0`

## Steps To Reproduce

1. Add a `hr` element as a child of `select`

## The current behavior

`Warning: validateDOMNesting: <hr> cannot appear as a child of <select>`


## The expected behavior

No `validateDOMNesting` warning.

String(!!invalidParent) + '|' + childTag + '|' + ancestorTag;
    if (didWarn[warnKey]) {
      return;
    }
    didWarn[warnKey] = true;
    const tagDisplayName = '<' + childTag + '>';
    if (invalidParent) {
      let info = '';
      if (ancestorTag === 'table' && childTag === 'tr') {
        info +=
          ' Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by ' +
          'the browser.';
      }
      console.error(
        'validateDOMNesting(...): %s cannot appear as a child of <%s>.%s',
        tagDisplayName,
        ancestorTag,
        info,
      );
    } else {
      console.error(
        'validateDOMNesting(...): %s cannot appear as a descendant of ' +
          '<%s>.',
        tagDisplayName,
        ancestorTag,
      );
    }
  }
}
function validateTextNesting(childText: string, parentTag: string): void {