To avoid the overlapping, per SwiperJS Docs for Fade Effect, you want to use the prop of fadeEffect and set the value of crossFade to true to achieve what you want so your slides do not overlap.

import { Swiper } from 'swiper/react';

<Swiper
  effect={`fade`}
  fadeEffect={{ crossFade: true }} // this
  ...
/>