Movie' cannot be used as a JSX component - reactjs

Question

Trying to make a movie app but the type won't let me take the arguments and display them (using typescript).The problem is that I am trying to map the movie Object and display them one by one to homepage and show all the movies that I got. Also I use api from themoviedb.
This is the movie script
import React, { useEffect, useRef, useState } from "react";
import { KeyObject } from "tls";
const IMG_API="ImageApi";
interface movie{
title: string;
path: path.ParsedPath;
overview: string;
voteavg: string;
key: KeyObject;
}
const Movie=(movie:movie)=>{
<div className="movie">
<img src={IMG_API+movie.path} alt={movie.title} />
<div className="info">
<h3>{movie.title}</h3>
<span>{movie.voteavg}</span>
</div>
<div className="overview">
<h2>Overview</h2>
<p>{movie.overview}</p>
</div>
</div>
}
export default Movie;
This is the home page script.
import NavigationBar from "../NavigationBar/NavigationBar";
import Movie from "../Movie";
import React, { useEffect, useRef, useState } from "react";
const FEATURED_API="baseUrl+apiKey";
const HomePage= () =>{
const movieElement=useRef(new Array());
const [movies,setMovie]=useState([]);
useEffect(()=>{
fetch(FEATURED_API).then((res)=>res.json)
.then(data=>{
setMovie(data.arguments);
});
},[]);
return(
<>
<div className="header">
<header>Welcome to the cinema</header>
<NavigationBar/>
</div>
<div className="movie-container">
{movies.map((movie)=><Movie key={movie} {...movies}/>)}
</div>
</>
);
}
const HomePage= () =>{
const movieElement=useRef(new Array());
const [movies,setMovie]=useState([]);
useEffect(()=>{
fetch(FEATURED_API).then((res)=>res.json)
.then(data=>{
setMovie(data.arguments);
});
},[]);
return(
<>
<div className="header">
<header>Welcome to the cinema</header>
<NavigationBar/>
</div>
<div className="movie-container">
{movies.map((movie)=><Movie key={movie} {...movies}/>)}
</div>
</>
);
}

Answer 1

When your function body has ( ) ie. round(parenthesis) brackets, the return is implicit. ie. whatever is in the curly braces will be returned automatically
const Movie=(movie:movie)=>(
<div className="movie">
<img src={IMG_API+movie.path} alt={movie.title} />
<div className="info">
<h3>{movie.title}</h3>
<span>{movie.voteavg}</span>
</div>
<div className="overview">
<h2>Overview</h2>
<p>{movie.overview}</p>
</div>
</div>
)
When your function body has a { } ie. curly brackets, you have to explicit use the return keyword to return something
const Movie=(movie:movie)=>{
return (
<div className="movie">
<img src={IMG_API+movie.path} alt={movie.title} />
<div className="info">
<h3>{movie.title}</h3>
<span>{movie.voteavg}</span>
</div>
<div className="overview">
<h2>Overview</h2>
<p>{movie.overview}</p>
</div>
</div>
)
}

Answer 2

In the below code, if you have used {}, then you will have to manually return the JSX as :
const Movie=(movie:movie)=>{
return (
<div className="movie">
<img src={IMG_API+movie.path} alt={movie.title} />
<div className="info">
<h3>{movie.title}</h3>
<span>{movie.voteavg}</span>
</div>
<div className="overview">
<h2>Overview</h2>
<p>{movie.overview}</p>
</div>
</div>
)
}
This is what it is complaining about, if you were not using {} then it would have returned it auto using ES6 short form of arrow functions.