I'm using create react app and I need to assign props values to a styles of the component. In this case background image 'url' is need to pass as props to styles. I have tried a lot of solutions but none of them worked

I'm making a component named HeroSection with props including backgroundURL and videoURL, I'm then using a statement to assign backgroundImage if the prop videoURL is empty

Home.js

import React from "react";
import HeroSection from "./components/HeroSection";

function Home() {
  return (
    <div className="home">
      <HeroSection
        firstLine="Not just a team,"
        secondLine="We are a "
        autoType={[
          "family of rebels",
          "movement of ideas",
          "collection of culture",
        ]}
        backgroundURL="../assets/hero_pic.jpg"
        videoURL=""
      />
    </div>
  );
}

export default Home;

HeroSection.jsx

import React from "react";
import Typed from "react-typed";

function HeroSection(props) {

  return (
    <div
      className={
        props.videoURL === "" ? "hero-section img-background" : "hero-section"
      }
      style={{
        backgroundImage:
          props.videoURL === "" ? `url(${this.props.backgroundURL})` : "none",
      }}
    >
    
      <h2>
        <span className="first-line">{props.firstLine}</span>
        <br />
        <span className="second-line">{props.secondLine}</span>
        <Typed
          strings={props.autoType}
          typeSpeed={40}
          loop={true}
          backDelay={2000}
          backSpeed={20}
        />
      </h2>
    </div>
  );
}

export default HeroSection;

I HAVE ALSO TRIED THESE STATMENTS AND NONE OF THEM WORKED

    props.videoURL === "" ? `url(${props.backgroundURL})` : "none",
   props.videoURL === "" ? `url('file://${props.backgroundURL}')` : "none",