I'm not quite sure what I'm doing wrong here. I placed the PNG images in the src folder and used require and relative paths to reference the images. I feel like I'm going crazy. For reference, I'm creating a countdown to celebrating birthdays with close friends and family. The images will eventually become an accordion showing a countdown to their respective birthdays. At the end of the countdown, a text box will appear to speak to them. I also created an Accordian component to contain the working code. Maybe I imported the file twice? I have imported both in accordian file and app.js file.

import Accordian from './accordian'; import AugustusDaGreat from './AugustusDaGreat.png'; import DadMatt from './Dad-Matt.png'; import DavidDaDon from 'DavidDaDon.png'; import propic from './propic.png'; import RickyKyle from './RickyKyle.png'; // import 5 pngs of friends const gus = AugustusDaGreat; const dadMatt = DadMatt; const daveDaDon = DavidDaDon; const profilePic = propic; const bigDickRick = RickyKyle; function App(props) { return ( 
 
Never Miss A Birthday!
                  
 ); }

I've tried using require in the src attribute and naming the files using const variables.