React why page with slider not working on iphone?

Question

I have a React component Slider(using React-slick) and when I open the app on iPhone I'm getting an error page reloading 2 times and broken with error The page has encountered an error again on this page. I have one more slider without images (slider with comments block) and it works correctly. I think the problem may be in the use of images or imports because I did not find any article on the Internet about React Slick not working correctly on iOS.

slider wrapper--->

const TeamSlider = () => {
    const sliderRef = useRef(null);
    const next = () => {
        sliderRef.current.slickNext();
    };

    const previous = () => {
        sliderRef.current.slickPrev();
    };

    return (
        <section className={styles.team} id="team">
            <img src="/assets/img/blur-right.svg" alt="blur" className={styles.teamBlur} />

            <div className={base.container}>
                <div className={styles.teamInner}>
                    <div className={styles.teamWrapper}>
                        <h2 className={cn(base.title2, styles.teamTitle)}>Команда проекта</h2>



                        <div className={styles.teamArrows}>
                            <button className={styles.teamArrow} onClick={previous}>
                                <ArrowLeftShort />
                            </button>

                            <button className={styles.teamArrow} onClick={next}>
                                <ArrowRightShort />
                            </button>
                        </div>

                    </div>

                    <div className={styles.teamSlider}>
                        <Slider ref={sliderRef} {...settings}>
                            {TEAM_LIST.map((employe, index) => {
                                return (
                                    <TeamItem
                                        name={employe.name}
                                        key={index}
                                        role={employe.role}
                                        image={employe.image}
                                        text={employe.text}
                                    />
                                );
                            })}
                        </Slider>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default TeamSlider;

slider Item --->

import React, { memo, useState } from 'react';
import './style.css';
import Vk from '../../../../../icons/Vk';
import Telegram2 from '../../../../../icons/Telegram2';
import Instagram from '../../../../../icons/Instagram';
import styles from '../../../index.module.css';
import ModalNew from '../../../../../common/ModalNew';
import { TeamModal } from '../TeamModal/TeamModal';

export const TeamItem = memo(({ name, role, image, text }) => {
    const [openTeamModal, setOpenTeamModal] = useState(false);
    return (
        <div className="TeamItemContainer" onClick={() => setOpenTeamModal(true)}>
            <div
                style={{
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'flex-end',
                    height: '450px',
                    width: '350px',
                    backgroundImage: `url(${image})`,
                    backgroundSize: 'cover',
                    // objectFit: 'cover',
                    borderRadius: '12px',
                }}
            >
                <div
                    style={{
                        padding:'20px',
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '5px',
                    }}
                >
                    <p style={{ fontWeight: 500, color: 'white', fontSize: '20px' }}>{name}</p>
                    <p style={{ color: '#e5e8ebcc' }}>{role}</p>

                    <div className={styles.modalTeamSocials} style={{ margin: 0 }}>
                        <a href={''} className={styles.teamSlideInfoSocialLink}>
                            <Vk />
                        </a>

                        <a href={''} className={styles.teamSlideInfoSocialLink}>
                            <Instagram />
                        </a>

                        <a href={''} className={styles.teamSlideInfoSocialLink}>
                            <Telegram2 />
                        </a>
                    </div>
                </div>
            </div>
            <ModalNew active={openTeamModal} setActive={setOpenTeamModal}>
                <TeamModal employe={{ name, role, image, text }} />
            </ModalNew>
        </div>
    );
});

I'm trying to delete this component from the page after that site is working correctly