React UseEffect Not Rendering

I am trying to do a simple render from state using useEffect but coming up blank, event though the useEffect is retrieving the data and twice! (although I only require it to render once and it won't get updated)..

Json data file (extract) 'moviedetails.json':

[
    {
        "Movie": {
            "RegionId": 1,
            "TitleId": 1,
            "Title": "13 Hours: The Secret Soldiers of Benghazi",
            "TitleYear": 2016,
            "Summary": "On Sept. 11, 2012, Islamic militants attack the U.S. Consulate in Benghazi, Libya, killing Ambassador J blah blah."
        },
        "Scenes": [
            {
                "SceneId": 2,
                "LocationSiteId": 108,
                "LocationPlaceName": "Valletta",
                "LocationSiteName": "Liesse Il-Belt",
                "Latitude": 35.89615,
                "Longitude": 14.5136
            },
            {
                "SceneId": 474,
                "LocationSiteId": 108,
                "LocationPlaceName": "Valletta",
                "LocationSiteName": "Liesse Il-Belt",
                "Latitude": 35.89615,
                "Longitude": 14.5136
            },
etc etc...
}
]

And the js file...

import { Container } from "react-bootstrap";
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import { Link, useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import Movies from '../data/moviedetails.json'

const MovieDetails = () => {

    const { id } = useParams()
    const [movie, setMovie] = useState([])       

    
    useEffect(() => {
        if (loadingMovie) {
            return
        }

     const filteredMovieDetails =   Movies.filter(moviedetail => moviedetail.Movie.TitleId == id)
             setMovie ( filteredMovieDetails )
        console.log ( filteredMovieDetails) // gets array but runs twice!              

    },[]);// Only needs to run once
    
    
    return (  

// RETURNS BLANK!   
        
        <Container> 
            <Row>

         <h1>{movie.Title}</h1>        
        </Row>            
         
       <Row>        
        <article>
           {movie.Summary}
        </article>
        </Row>      
                  
        </Container>
    )
}
export default MovieDetails;

At this stage I simply want to show the movie.Title and movie.Summary Nothing is returned although state 'movies' has the correct data. I assume that is has something to do with the 'async' and the useEffect is running AFTER the return statement?