Block background doesn’t work on Site Editor section

In the project’s themes folder, there is a banner block

Theme Folder

banner.js file

import { InnerBlocks } from "@wordpress/block-editor"

wp.blocks.registerBlockType("ourblocktheme/banner", {
    title: "Banner",
    edit: EditComponent,
    save: SaveComponent
});

function EditComponent() {
    const useMeLater = (
        <>
            <h1 className="headline headline--large">Welcome!</h1>
            <h2 className="headline headline--medium">We think you&rsquo;ll like it
                here.</h2>
            <h3 className="headline headline--small">Why don&rsquo;t you check out
                the <strong>major</strong> you&rsquo;re interested in?</h3>
            <a href="#" className="btn btn--large btn--blue">Find Your Major</a>
        </>
    )

    return (
        <div className="page-banner">
            <div className="page-banner__bg-image"
                 style={{backgroundImage: "url('/wp-content/themes/fictional-block-theme/images/library-hero.jpg')"}}></div>
            <div className="page-banner__content container t-center c-white">
                <InnerBlocks />
            </div>
        </div>
    )
}

function SaveComponent() {
    return (
        <div className="page-banner">
            <div className="page-banner__bg-image"
                 style={{backgroundImage: "url('/wp-content/themes/fictional-block-theme/images/library-hero.jpg')"}}></div>
            <div className="page-banner__content container t-center c-white">
                <InnerBlocks.Content />
            </div>
        </div>
    )
}

Added theme CSS files for the editor pages in the functions.php file

function university_features() {
  add_theme_support('editor-styles');
  add_editor_style(array('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i', 'build/style-index.css', 'build/index.css'));
}

add_action("after_setup_theme", "university_features");

On style attribute as a temporary background is used this path background-image: "url('/wp-content/themes/fictional-block-theme/images/library-hero.jpg')"

banner.js -> EditComponent

<div className="page-banner">
  <div
    className="page-banner__bg-image"
    style={{
      backgroundImage:
        "url('/wp-content/themes/fictional-block-theme/images/library-hero.jpg')",
    }}
  ></div>
  <div className="page-banner__content container t-center c-white">
    <InnerBlocks />
  </div>
</div>;

If it’s edited any blog post (or another post type), the background appears but on the Site Editor page the image isn’t rendered

Post Editing

Screenshots

Edit Post

Choosing Banner Block

Banner Block

Rendered Image on Network

Site Editor section

Screenshots

Choosing Site Editor

Choosing Templates

Choosing Index

Choosing Banner Block

Banner Block

Network Tab

What is the problem here?