I couldn't find the solution on how to pass specific useState states to respective mapped elements

export const Polska = () => {
  const [riverVisible, setRiverVisible] = useState(false)
  const [mountainVisible, setMountainVisible] = useState(false)
  const [lakeVisible, setLakeVisible] = useState(false)

  const [currentSlide, setCurrentSlide] = useState(0)

  const handleClick = (direction) => {
    direction === 'left' 
    ? setCurrentSlide(currentSlide > 0 ? currentSlide - 1 : 2) 
    : setCurrentSlide(currentSlide < 3 -1 ? currentSlide + 1 : 0)
  }
 return (
    <div className='polska'>
<Row>
        <div className='listOfLandscapes'>
          <div className="listOfLandscapes__slider" style={{transform: `translateX(-${currentSlide * 100}vw)` }}>
            {/* {
              PolskaLandscapes.map((landscape) => */}
                <div className='listOfLandscapes__slider__item'>
                    <SvgMountains />
                    <button className='listOfLandscapes__slider__item__desc' onClick={() => setMountainVisible(!mountainVisible)}>
                        Spectacular Mountains
                    </button>
                </div>
                <div className='listOfLandscapes__slider__item'>
                    <SvgRivers />
                    <button className='listOfLandscapes__slider__item__desc' onClick={() => setRiverVisible(!riverVisible)}>
                        The Longest Rivers
                    </button>
                </div>
                <div className='listOfLandscapes__slider__item'>
                    <SvgLakes />
                    <button className='listOfLandscapes__slider__item__desc' onClick={() => setLakeVisible(!lakeVisible)}>
                        Beautiful Lakes
                    </button>
                </div>
              {/* )
            } */}
          </div>
        </div>
      </Row>

in the code above everything is hardcoded, but for sure there is a way to make it cleaner. I tried to pass it in the object properties but it didn't work...

import SvgMountains from "./svgPolska/SvgMountains"
import SvgRivers from "./svgPolska/SvgRivers"
import SvgLakes from "./svgPolska/SvgLakes"

export const PolskaLandscapes = [
    {
        id: 1,
        bcg: <SvgMountains />,
        desc: 'Spectacular Mountains',
        v: riverVisible,
        sv: setRiverVisible
    },
    {
        id: 2,
        bcg: <SvgRivers />,
        desc: 'The Longest Rivers',
        v: mountainVisible,
        sv: setMountainVisible
    },
    {
        id: 3,
        bcg: <SvgLakes />,
        desc: 'Charming Lakes',
        v: lakeVisible,
        sv: setLakeVisible
    }
]

I would be grateful for any leads.