Вот скриншот моего проверяющего элемента:

Это статическая версия моей страницы, которая правильно отображается (обратите внимание на сетку кладки и карусель совы):

Однако, когда я пытаюсь преобразовать мою статическую HTML-страницу в компонент React, файл bundle.js вставляется после сценариев в мой index.html, то есть он загружается последним, и я думаю, что он перезаписывает мои сценарии, что в результате чего моя страница отображается так:

Я заметил, что если я размещу свои скрипты за пределами закрывающего тега body, то bundle.js все равно будет отображаться внутри тега body, и он будет отображаться первым, хотя это повредит мои изображения, но по крайней мере компоновка верна :

Есть ли способ оставить мои скрипты внутри закрывающего тега body и просто отображать bundle.js первым, а не последним? Или есть другой способ исправить это