getting blank web page using component | ReactJS

Question

I'm having a problem with my ReactJS app which is showing a blank web page after using a functional component. I have other components but this one is causing this problem

import React from "react";
function Call()
{
    return (
        <section className="footer-call-action">
            <div className="container">
                <div className="footer-call-action-inner bgs-cover"
                     style="background-image: url(assets/images/background/footer-call-action-bg.png);">
                    <div className="row align-items-center">
                        <div className="col-lg-6">
                            <div className="footer-call-action-image rpt-60">
                                <img src="assets/images/footer/footer-call-action.png" alt="Call to Action"></img>
                            </div>
                        </div>
                        <div className="col-lg-5">
                            <div className="footer-call-action-content py-70">
                                <h2>Better data with a better Company</h2>
                                <a href="about.html" className="theme-btn style-eight mt-30">Learn click here <i
                                    className="fas fa-long-arrow-alt-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}
export default Call;

and this is my App.js

import logo from './logo.svg';
import './App.css';
import Call from "./layout/Call";
function App() {
  return (
    <div className="App">
        <Call/>
    </div>
  );
}

export default App;

Answer 1

Your solution to the problem is this line:

The style prop expects a mapping from style properties to values, not a string.

style={{backgroundImage: "url(assets/images/background/footer-call-action-bg.png)"}}