How to change background color of React Awesome Slider Component

How do I change the background color of the React Awesome Slider component I tried overwritng the css I tried using !important tag here am I missing something like I cannot find out what property it is to overwrite the background color style. Does anyone know how to do this?

here is my component using the Awesome Slider component:

import styles from "../style";
import AwesomeSlider from "react-awesome-slider";
import 'react-awesome-slider/dist/styles.css';
import React, { useRef, useState } from 'react';
import '../index.css'
import 'react-awesome-slider/dist/custom-animations/cube-animation.css';

const Component = () => {

  const sliderStyle = {
    backgroundColor: 'red !important',   
  };
 
  return (
  <section id="top-level" ref={sectionRef} className={`${styles.paddingY} ${styles.flexCenter} flex

    <div className="flex flex-wrap sm:justify-start justify-center w-full feedback-container relative z-[1] ">
      <AwesomeSlider className="slider" style={sliderStyle} bullets={false} mobileTouch={true} animation="cubeAnimation" >
        {array.map((card) => (
          <div key={card.id}>
            <AnotherComponent {...card} />
          </div>
        ))}
      </AwesomeSlider>
    </div>
  </section>
);}

export default Component;