Can't drag and not getting on center

[seyedasfar]

I'm facing some issues I can't able to drag slide item and slide not on center and when I set centerMode: true adding 1+ to slides, means If I set slidesToShow: 4 it shows 5

code

import React from 'react';
import Slider from "react-slick";

const Brand = () => {
  const settings = {
    dots: false,
    arrows: false,
    // centerMode: true,
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 4,
    // autoplay: true,
    speed: 3000,
    autoplaySpeed: 1000,
    draggable: true,
    responsive: [
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 3,
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 2,
        }
      }
    ]
  };
  return (
    <div>
      <Slider {...settings}>
        <div>
          <h3>1</h3>
        </div>
        <div>
          <h3>2</h3>
        </div>
        <div>
          <h3>3</h3>
        </div>
        <div>
          <h3>4</h3>
        </div>
        <div>
          <h3>5</h3>
        </div>
        <div>
          <h3>6</h3>
        </div>
        <div>
          <h3>7</h3>
        </div>
      </Slider>
    </div>
  )
}

export { Brand as default }

Please help me in solving this issue.