How to make React dynamic import?

Question

JavaScript

Good afternoon!
I'm trying to make a dynamic import in React.

/*
Переменная откуда я беру путь до компонента
*/
const steps = [
    {
        name: 'Шаг 1',
        component: './steps/step1.jsx'
    },
    {
        name: 'Шаг 2',
        component: './steps/step2.jsx'
    }
]

/*
Динамический импорт 
*/
 const Step =  React.lazy(()=> import(steps[0].component))

<React.Suspense fallback={<div>Loading...</div>}>
                <Step/>
            </React.Suspense>

That I receive an error that the module will not find.
If you insert a line, then everything works

/*
При таком варианте все работает
*/
 const Step =  React.lazy(()=> import('./steps/step1.jsx'))

Please tell me what is the reason?

Answer 1

componentRecord immediately React.lazy.