Почему require не ведет себя так же, как import, если задана такая же структура

Кажется, у меня принципиальное непонимание, когда речь идет о import и require. Из того, что я прочитал, я знаю, что разница в том, что require основан на загрузчиках модулей, таких как CommonJS, тогда как импорт на самом деле является функцией ES6.

Предполагая следующее:

import ExamplePost from 'example-post.md'

Это пример импорта с MDX JS в качестве соответствующего загрузчика, и я установите это в моей функции рендеринга React, например:

render () {
  return <ExamplePost />
}

Вышеупомянутое работает отлично, но поскольку я хочу динамически загружать разные файлы Markdown, и я прочитал, что ES6 import статичны, я намеревался сделать следующее:

let postName = 'example-post'
const ExamplePost = require(`${postName}.md`)

К сожалению, не работает, получаю: ExamplePost is not defined

Я помещаю оба примера вверху документа. Я также проверил обе версии и вижу разницу в результате:

Возвращает импорт ES6: [Function]

Требовать возврата: Object [Module] { default: [Function] }

Помогите мне встать на верный путь, почему вышеперечисленное требование не работает так же?