Proper way of handling multiple sliders inside a map function

Tried adding buttons on each slider, but the only slider working is the last one.

```
import React, { useRef } from "react"
import PropTypes from "prop-types"
//import BackgroundImage from "gatsby-background-image"
import GatsbyImage from "gatsby-image"
import { SRLWrapper } from "simple-react-lightbox"
import Slider from "react-slick"
import { CgArrowLeft, CgArrowRight } from "react-icons/cg"

const options = {
settings: {
usePreact: true,
autoplaySpeed: 0,
},
thumbnails: {
showThumbnails: false,
},
}

const EachDivision = ({ nodes }) => {
const sourceSlider = useRef()
const next = () => {
sourceSlider.current.slickNext()
}
const prev = () => {
sourceSlider.current.slickPrev()
}

const settings = {
arrows: false,
dots: false,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
draggable: false,
autoplay: false,
responsive: [
{
breakpoint: 1024,
},
{
breakpoint: 10000, // a unrealistically big number to cover up greatest screen resolution
settings: "unslick",
},
],
}

const sorted = nodes.nodes
.filter(item => item.id !== "cG9zdDozODA=")
.concat(nodes.nodes.filter(item => item.id === "cG9zdDozODA="))

return (

{sorted.map(node => {
return (

EachDivision.propTypes = {
nodes: PropTypes.object.isRequired,
}

export default EachDivision

```