why is app jsx not displaying everything?

i am trying to write a react code but
app .jsx doesn’t display anything except the (♥) no matter what i do

here is the first file……….
moviecard.jsx

  import React from "react"
function Moviecard (Movie) {
   function onFavouriteClick () {
    alert("clicked")
   }
return (
    <div className="movie-card">

        <div className="movie-poster">
        <img src={Movie.url} alt={Movie.title} />

            <div className="movie-overlay">
        <button className="favourite-btn" onClick={onFavouriteClick} >
        ♥
        </button>
             </div>

        </div>
        <div className="movie-info">
            <h3>{Movie.title}</h3>
            <p>{Movie.release_date}</p>
        </div>
    </div>
)
}

export default Moviecard

second file………..
home.jsx
…………………………………

    import React from "react";
import Moviecard from "../components/Moviecard";
function Home() {
 const movies = [
        {id: 1, title: "john wick", release_date:"2020"},
        
        {id: 2, title: "john wick 2", release_date:"2021"},
        
        {id: 3, title: "john wick 3", release_date:"2022"},
        
        {id: 4, title: "john wick 4", release_date:"2023"},
    ]
 return (
    <div className="home">
        <div className="movies-grid">
            {movies.map((Movie) => ( 
            <Moviecard key={Movie.id}/>
            ))}
        </div>
    </div>
    )
}

export default Home;

third file……..
app.jsx
……………………………….

    import React from "react";
import './App.css';
import Home from "./pages/home";
function App() {
  return (
  <>
  <Home/>
  </>
  )
};
export default App;

……..