New to react, typescript. I'm trying to create a "Hero" Section for a site and want to render this pick in the background.

I've been stuck trying to import a png file from my assets folder to my Hero.tsx file in my components folder. Here's how tthe code looks:

(Hero.tsx in components folder)

import heropic from "./assets/heropic.png";
interface HeroProps {
children: React.ReactNode;
}
const Hero = (props: HeroProps) => {
return (
<section>
<img src={heropic} />
{props.children}
</section>

​

(App.tsx)

//import Header from "./components/Header";
import { Navbar } from "./components/Navbar";
import { Routes, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import { Home } from "./pages/Home";
import { About } from "./pages/About";
import { GetInvolved } from "./pages/GetInvolved";
import { Latest } from "./pages/Latest";
import { ContactUs } from "./pages/ContactUs";
import Hero from "./components/Hero";
function App() {
return (
<>
<Navbar />
<Container>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/GetInvolved" element={<GetInvolved />} />
<Route path="/Latest" element={<Latest />} />
<Route path="/GetInvolved" element={<GetInvolved />} />
<Route path="/Contact" element={<ContactUs />} />
</Routes>
</Container>
<Hero>I'm Hero</Hero>
</>
  );
}
export default App;
I created a .d.ts file and a folder for it: and have imported react-svg and png

declare module "*.png" {
const value: any;
export default value;

// alt syntax: export = value //
  }

I get this error, 2nd pic is a view of most of my files.

​

Been stuck for a while, help would be appreciated. Thanks

​

Error message

Files