Использование require со строкой работает, но с обратными кавычками выдает ошибку

Итак, я пытаюсь загрузить изображение, которое пользователь сохранил для своего профиля. Попытка использовать этот фрагмент кода:

const imgUrl = '../../styles/img/profpic.png';
const profImg = require(`${imgUrl}`);

А затем загрузите изображение в метод рендеринга следующим образом:

<img src = {profImg} className = "" alt = {key + " profile pic"} />

Когда не используются обратные кавычки и строка помещается в скобки require, он находит файл в вызове require, и все работает нормально и загружает изображение. При использовании обратных кавычек я получаю следующую ошибку:

Uncaught Error: Cannot find module '../../styles/img/profpic.png'.

Есть идеи, почему это происходит?