Export or import trouble with jsx files

I try to import some components into my App.js file from index2.js(export .jsx collection) where I can import only one component to see something on website – when I want import more, the page is white / empty, but if I import only Navbar.jsx component that’s work.

File structure:

__node_modules

__public

__src
____components
_______Cryptocurrencies.jsx
_______Cryptodetails.jsx
_______index2.js
_______Exchanges.jsx
_______Homepage.jsx
_______Navbar.jsx
_______News.jsx
___App.css
___App.js
___index.js

__.gitignore
__package-lock.json
__package.json

index.js:

import react from "react";
import reactDom from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App"
import 'antd/dist/antd.min.css';
reactDom.render(
    <Router>
        <App />
    </Router>, 
    document.getElementById('root')
)

App.js

import React from 'react'
import { Routes, Route, Link } from 'react-router-dom'
import { Layout, Typography, Space } from 'antd'
import { Cryptocurrencies, Cryptodetails, Exchanges, Homepage, Navbar, News } from './components'
import './App.css';

const App = () => {
    return (
        
            <div className='app'>
                <div className='navbar'>
                    <Navbar />
                </div>
                <div className='main'>
                <Layout>
                    <div className='routes'>
                        <Routes>
                            <Route path='/'>
                                <Homepage />
                            </Route>
                            <Route path='/exchanges'>
                                <Exchanges />
                            </Route>
                            <Route path='/cryptocurrencies'>
                                <Cryptocurrencies />
                            </Route>
                            <Route path='/crypto:coinId'>
                                <Cryptodetails />
                            </Route>
                            <Route path='/news'>
                                <News />
                            </Route>
                        </Routes>
                    </div>
                </Layout>
            </div>
                <div className='footer'>

                </div>
            </div>
        
    )
}

export default App

index2.js

export { default as Cryptocurrencies } from './Cryptocurrencies'
export { default as Cryptodetails } from './Cryptodetails'
export { default as Exchanges } from './Exchanges'
export { default as Homepage } from './Homepage'
export { default as Navbar } from './Navbar'
export { default as News } from './News'

The .jsx files are created by using default rafce.

Not working code (App.js):

...
import { Cryptocurrencies, Cryptodetails, Exchanges, Homepage, Navbar, News } from './components'
...
uncommented code with Layout part in div ``main`` class
...

Working code (App.js):

...
import { Navbar } from './components'
...
//commented code with Layout part in div ``main`` class
...

Please, explain me where have make an error. Thanks!