Hello, I have a Next.js 13 project, where you can go to e.g. localhost:3000/movie?id=9659 and it should display the movie title. It does this for a very short time and then an error pops up saying 'details is undefined'.

'use client';
import { fetchData } from '@/utils';
import { useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';

function Movie() {
const [details, setDetails] = useState({});
const [isLoading, setIsLoading] = useState(true);
const searchParams = useSearchParams();
const id = searchParams.get('id');

useEffect(() => {
const fetchMovieDetails = async () => {
try {
const data = await fetchData(/movie/${id});
setIsLoading(false);
setDetails(data);
} catch (error) {
// Handle error here
setIsLoading(false);
console.error('Error fetching movie details:', error);
}
};

fetchMovieDetails();
}, [id]);

return (
<div>
<h1>{isLoading ? 'Loading...' : details.title}</h1>
</div>
);
}
export default Movie;