Slider of images whit filters CSS

Filters.jsx

import React, { useEffect } from 'react'
import styled from 'styled-components'
import Slider from 'react-slick'

import thumbnail from '../assets/img/img1.jpg'

import '../styles/instagram.min.css'
import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'

const FiltersStyles = styled.div`
  width: 70%;
  margin: auto;
  .slick-prev:before {
    color: var(--blue-1);
  }
  .slick-next:before {
    color: var(--blue-1);
  }
`
const Filters = ({ filterClass, setFilterClass, imgRef }) => {
  useEffect(() => {
    const divImg = imgRef.current
    divImg.style.filter = ''
  }, [filterClass])

  const filters = [
    {
      name: 'Aden',
      class: 'filter-aden',
    },
    {
      name: 'Amaro',
      class: 'filter-amaro',
    },
    {
      name: 'Ashby',
      class: 'filter-ashby',
    },
  ]

  const settings = {
    dots: false,
    Infinite: true,
    speed: 500,
    slidesToShow: 5,
    slidesToScroll: 5,
  }

  return (
    <FiltersStyles>
      <Slider {...settings}>
        {filters.map((filter, index) => {
          return (
            <div key={index}>
              <div
                className={`filter-item ${
                  filterClass === filter.class ? 'filter-item--selected' : ''
                }`}
                onClick={() => setFilterClass(filter.class)}
              >
                <div className="filter-item__img">
                  <img
                    className={filter.class}
                    src={thumbnail}
                    alt={filter.name}
                  />
                </div>
                <div className="filter-item__name">
                  <p>
                    <strong>{filter.name}</strong>
                  </p>
                </div>
              </div>
            </div>
          )
        })}
      </Slider>
    </FiltersStyles>
  )
}

export default Filters