Как импортировать несколько компонентов с app.js в react?

Есть app.js в котором лежит два компонента:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  
  render() {
    return (
      <div className="app">
        какой-то текст.
      </div>
    );
  }
}

export default App;

class Gap extends Component {
  
  render() {
    return (
      <div className="apps">
        какой-то текст 2
      </div>
    );
  }
}

и файл index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {Gap} from './App';
import registerServiceWorker from './registerServiceWorker';


ReactDOM.render(<App/> , document.getElementById('root'));

registerServiceWorker();

как мне отрендерить компонент Gap?
Вопрос скорее слишком примитивный, но на выходе я не могу получить необходимый результат.
То есть App -> id root
а Gap в id example.