Media not rendering on first try, only after a refresh

Question

Hey, first of all, this is my first complex Next.js project, so it is very probable that I am doing something stupid.

So the problem is that, on the homepage of my app I have a video (1) and an image (2) that render only after a refresh, they won't show the first time the website is accessed. Both of them are stored locally in the /public folder. I have attached a before and an after-refresh screenshot with the problem.

You can test this live here: https://moodvie.edwardcs.com/

Index page source code: https://github.com/edwardsavin/moodvie/blob/main/src/pages/index.tsx

Component with the video source code: https://github.com/edwardsavin/moodvie/blob/main/src/components/presentation.tsx

Component with the image source code:
https://github.com/edwardsavin/moodvie/blob/main/src/components/main-footer.tsx

I searched and tried everything that I could found on Google but with no luck at all. Once again, it is very probable that I am doing something very wrong since I am not super familiar with Next and React. Thank you so much for reading this, if you have any idea of how to fix this bug don't hesitate to write here, I will try every single thing.

Gaming

Programming

Media not rendering on first try, only after a refresh