Movie image not displaying top of webpage

Question

Hi i am stuck in a problem when Am trying to display movie image in top of the webpage its isn't showing don't know where i am wrong please help i want to display movie banner top of the webpage

https://ibb.co/QprbB5n

Banner.js This is my Banner page where i wrote whole logic

import React, { Component } from 'react';
import './Banner.css';
import Request from './Request';
import Axios from 'axios';

class Banner extends React.Component {

    constructor(props) {
        super(props)

        this.state = {
            movies: []
        }
    }

    fetchData = async () => {

        const movies = await Axios.get(Request.fetchNetflixOriginals)
        this.setState({
            movies: movies.data.results[
                Math.floor(Math.random() * movies.data.results.length - 1)
            ]
        });
        console.log(movies);
        return movies;
    }

    componentDidMount() {
        this.fetchData();
    }

    render() {

        // const {movies} = this.state

        return (
            <header className='banner'
                style={{
                    backgroundSize: 'cover',
                    backgroundImage: `url(
                    "https://image.tmdb.org/t/p/original/${this.props.movies?.backdrop_path}"
                )`,
                    backgroundPosition: 'center center',
                }}
            >
                <div className='banner-contents'>
                    <h1>
                        {this.props.movies?.title || this.props.movies?.name || this.props.movies?.original_name}
                    </h1>

                    <div className='banner_button'>
                        <button className='banner_button'>Add</button>
                        <button className='banner_button'>Delete</button>
                    </div>
                </div>
            </header>
        )
    }
}

export default Banner;