Estoy usando la aplicación Create React y necesito asignar valores de accesorios a los estilos del componente. En este caso, la imagen de fondo 'url' debe pasar como accesorios a los estilos. He probado muchas soluciones, pero ninguna funcionó.

Estoy creando un componente llamado HeroSection con accesorios que incluyen backgroundURL y videoURL, luego estoy usando una declaración para asignar backgroundImage si el accesorio videoURL está vacío

Inicio.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;

TAMBIÉN HE PROBADO ESTAS ESTADÍSTICAS Y NINGUNA FUNCIONÓ

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