React Slick Unexpected Token

I want to add react-slick by following it's documentation but "Unexpected token" keeps showing, i just want the react-slick work and styling it later.

I'm really sorry i know this is very basic but i've browsing long enough until i ended up here, i'm still learning on reactJS

This is my import

    import React from "react";
    import Slider from "react-slick";
    import "slick-carousel/slick/slick.css"; 
    import "slick-carousel/slick/slick-theme.css";
    import {ServicesContainer,ServicesH1,ServicesWrapper,ServicesCard,ServicesIcon,ServicesH2,ServicesP} from './ServicesElements';

This is my code Planning to styling it later after its showing on the website i build

const Services = () => {
    return (
        <ServicesContainer id="ourproducts">
            render() {
                const settings = {
                dots: true,
                infinite: true,
                slidesToShow: 3,
                slidesToScroll: 1,
                autoplay: true,
                speed: 2000,
                autoplaySpeed: 2000,
                cssEase: "linear"
                };
                return (
                <div>
                    <h2>Auto Play</h2>
                    <Slider {...settings}>
                    <div>
                        <h3>1</h3>
                    </div>
                    <div>
                        <h3>2</h3>
                    </div>
                    <div>
                        <h3>3</h3>
                    </div>
                    </Slider>
                </div>
                );
            }
            <ServicesH1>Our Products</ServicesH1>
            <ServicesWrapper>
                <ServicesCard>
                    <ServicesIcon img src={require('../../images/ikansidat.jpg').default}/>
                    <ServicesH2>Eel / Unagi / Ikan Sidat</ServicesH2>
                    <ServicesP></ServicesP>
                </ServicesCard>

                <ServicesCard>
                    <ServicesIcon img src={require('../../images/minyakkelapasawit.jpg').default}/>
                    <ServicesH2>Crude Palm Oil</ServicesH2>
                    <ServicesP></ServicesP>
                </ServicesCard>

                <ServicesCard>
                    <ServicesIcon img src={require('../../images/cocopeat.jpg').default}/>
                    <ServicesH2>Coco Peat</ServicesH2>
                    <ServicesP></ServicesP>
                </ServicesCard>
            </ServicesWrapper>
        </ServicesContainer>
    )
}

export default Services