Css – Background Image not showing despite having correct path as URL

I’m trying to add a background image in my React Project, but it’s not showing up despite having correct relative path as URL.
Here is my "App.js":

import "./styles.css";
        export default function App() {
          return (
            <div className="App">
              <h1>Hi All!</h1>
              <h2>Please guide why the background image isn't showing here???</h2>
            </div>
          );
        }
    

And following is the "styles.css":

.App {
  font-family: sans-serif;
  text-align: center;
  background: aqua;
  height: 100vh;
  background-image: url(./images/img-2.jpg);
  /* background-image: url(https://pixabay.com/photos/dandelion-seeds-dew-dewdrops-445228/); */
  background-size: cover;
  background-repeat: no-repeat;
}

And here is the codesandbox example: https://codesandbox.io/s/festive-scott-h28j42?file=/src/styles.css:0-294