How can i change the width of the slider in react slick?

Question

Can't change the width of the div the wraps the img. The div has the class of slick-slide and slick active. The 2 imgs shown are inside the div while the 3rd is outside. The sliderContainer class affects the next button while i can't even see the prev button.The current situation

import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import styles from "./Trending.module.css";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const token = `${process.env.REACT_APP_TOKEN}`;

export default function Trending({ setId }) {
  const [result, setResult] = useState([]);
  const [config, setConfig] = useState({});

  useEffect(() => {
    trendingMovieDay();
  }, []);

  async function trendingMovieDay() {
    setLoading(true);
    try {
      const response = await fetch(
        "https://api.themoviedb.org/3/configuration",
        {
          headers: {
            Authorization: token,
          },
        }
      );
      const result = await response.json();

      const res = await fetch(
        `https://api.themoviedb.org/3/trending/movie/day`,
        {
          headers: {
            Authorization: token,
          },
        }
      );
      const data = await res.json();

      // File path used in getting poster img
      setConfig({
        baseURL: result.images.secure_base_url,
        posterSize: result.images.still_sizes[2],
        backdropSize: result.images.backdrop_sizes[3],
      });

      setResult(data.results);
    } catch (error) {
      console.log("Error fetching trending movies of day data:", error);
    } finally {
      setLoading(false);
    }
  }
const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 3,
  };

  return (
    <div className={styles.container}>
      <h2 className={styles.trending}>Trending</h2>
      <div className={styles.sliderContainer}>
        <Slider {...settings}>
          {result.map((el) => {
            return (
              <div style={{ display: "flex" }}>
                <Link
                  to={`/movies/${el.id}`}
                  style={{ display: "block", width: "100px" }}
                >
                  <img
                    key={el.id}
                    className={styles.movieImg}
                    src={`${config.baseURL}${config.posterSize}${el.poster_path}`}
                    alt={el.title}
                    style={{
                      width: "150px",
                      height: "auto",
                      borderRadius: "8px",
                    }}
                  />
                </Link>
              </div>
            );
          })}
        </Slider>
      </div>
    </div>
  );
}

Tried setting the classes in css to have shorter width but doesn't work.