Bug: <TopBar> broken in React v18

### Steps to reproduce

Use React v18 and render:

```jsx

Home



Settings


Results

```

### Expected Behavior

A `` (and its children) should be rendered.

### Actual Behavior

```
index.js:481 React Router caught the following error during render Error: React.cloneElement(...): The argument must be a React element, but you passed undefined.
at Object.cloneElement (react.development.js:879:1)
at Object.cloneElementWithValidation [as cloneElement] (react.development.js:2413:1)
at TopBarMenu.render (index.js:1261:1)
at finishClassComponent (react-dom.development.js:19752:1)
at updateClassComponent (react-dom.development.js:19698:1)
at beginWork (react-dom.development.js:21611:1)
at beginWork$1 (react-dom.development.js:27426:1)
at performUnitOfWork (react-dom.development.js:26560:1)
at workLoopSync (react-dom.development.js:26466:1)
at renderRootSync (react-dom.development.js:26434:1) Object
```

### Version

5.7.0

### What browsers are you experiencing the problem on?

_No response_

### Relevant log output

_No response_

### Anything else we should know?

Additional information

Reproduce the example with React v18 and version 5.7.0, then inspect TopBarMenu.render at index.js:1261 and the related stack location at index.js:481. Trace why cloneElement receives undefined; done means the shown TopBar and its children render without the reported error.

Written by the indexing model from the issue text.