Error: Can't resolve '/hero.jpg' in '/home/ivan/Documents/background/src'

Quiero usar la propiedad background-image pero me aparece el siguiente error.

Error: Can't resolve '/hero.jpg' in '/home/ivan/Documents/background/src'

este es mi codigo:
App.css:

.App {
  text-align: center;
  background-image: url("/hero.jpg");
}

App.js:

import "./App.css";

function App() {
  return <div className="App">awdadw</div>;
}

export default App;

Este es mi arbol de directorios.

├── public
│   ├── favicon.ico
│   ├── hero.jpg
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   ├── robots.txt
│   ├── test1.jpg
│   └── test2.jpg
├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

.App {
      text-align: center;
      background-image: url("./public/hero.jpg");
    }