My react-simple-image-slider seams not working | ReactJS

Question

Im having trouble with this Reactjs component. I have imported and installed the component, type in necessary code. But it appeared with a black slider Here is the code I imported:

import React from "react";
import "./Banner.css";
import SimpleImageSlider from "react-simple-image-slider";

const image = [
  { url: "./banner1.png" },
  { url: "./banner2.png" },
];

const Banner = () => {
  return (
    <>
      <SimpleImageSlider
        width={1920}
        height={1080}
        images={image}
        style={Banner.css}
        slideDuration={1}
        navStyle={1}
        showBullets
        Shownavs
      />
    </>
  )
}

export default Banner

Here is how it displayed

Answer 1

***Import like this it will work***
import image1 from './image1.jpg';
import image2 from './image2.jpg';
import image3 from './image3.jpg'

 const image = [
        { url: image1 }, 
        { url: image2 },
        { url: image3 }
    ];