Помогите со слайдером Swiper

Ситуация такая, пытаюсь пихнуть свайпер в компонент реакта, когда задаю свойства для свайпера, slidesPerView отработывает хорошо, но другие не работают, такие как slidesPerColumn и slidesPerGroup, все слайды становятся в один, хотя должны разбиваться 4 слайда в одной колонке.

import React from 'react';
import {connect} from 'react-redux'
import './playlist.scss'
import '../../../node_modules/swiper/swiper.scss'
import {actionImportPlaylistSongs} from '../../redux/reducers/actions/actions'
import PlaylistSong from './PlaylistSong/PlaylistSong'
import { Swiper, SwiperSlide } from 'swiper/react';
class Playlist extends React.Component{

    UNSAFE_componentWillMount(){
            fetch('http://localhost:3000/songs')
            .then((res) => res.json())
            .then(
                (result) => {
                    this.props.importPlaylistSongs(result)
                    })
    }
    render(){
        console.log('dsadasdas', this.props.playlistSongs)
        return(
            <div className="playlist">
                <div className="playlist__container">
                    <div className="playlist__header">
                        <h1>Плейлист</h1>
                        <div className="playlist__buttons-box">
                            
                        </div>
                    </div>
                    <div className="playlist__main">
                        {/* <Swiper slidesPerView={3} slidesPerGroup={4} onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}>
                            {this.props.playlistSongs.map((song, index)=>{
                                return(
                                    <SwiperSlide key={index}><PlaylistSong song={song} key={index}/></SwiperSlide>
                                )
                            })}
                        </Swiper> */}
                        <Swiper  slidesPerView={2} slidesPerColumn={4}>
                            <SwiperSlide>Slide 1</SwiperSlide>
                            <SwiperSlide>Slide 2</SwiperSlide>
                            <SwiperSlide>Slide 3</SwiperSlide>
                            <SwiperSlide>Slide 4</SwiperSlide>
                            <SwiperSlide>Slide 5</SwiperSlide>
                            <SwiperSlide>Slide 6</SwiperSlide>
                            <SwiperSlide>Slide 7</SwiperSlide>
                            <SwiperSlide>Slide 8</SwiperSlide>
                            <SwiperSlide>Slide 9</SwiperSlide>
                        </Swiper>
                    </div>
                </div>
            </div>
        )
    }
}


function mapDispatchToProps(dispatch){
    return{
        importPlaylistSongs: (songs) => dispatch(actionImportPlaylistSongs(songs))
    }
}
function mapStateToProps(state){
    return{
        playlistSongs: state.playlistReducer.songs
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Playlist)