customize arrow of swiper js - reactjs

Question

I customerized the arrow shape and color of swiper js by adding svg, but it did not have any functionality. And I ended up having two sets of arrows on each side, one is my own arrow button which does not function, the other one is built in swiper js arrow which functions well.
so how to replace swiper's arrow with my own arrow that functions well?
import React from "react";
import sportsList from "../utils/sportsList";
import Card from "./Card";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import { Navigation } from "swiper";
export default function SliderComponent() {
return (
<>
<Swiper
spaceBetween={50}
slidesPerView={4}
onSlideChange={() => console.log("slide change")}
onSwiper={(swiper) => console.log(swiper)}
grabCursor={true}
modules={[Navigation]}
navigation={true}
breakpoints={{
// when window width is >= 320px
320: {
slidesPerView: 1,
spaceBetween: 24,
},
// when window width is >= 480px
480: {
slidesPerView: 2,
spaceBetween: 24,
},
// when window width is >= 640px
640: {
slidesPerView: 6,
spaceBetween: 24,
},
1024: {
slidesPerView: 6,
spaceBetween: 32,
slidesPerGroup: 1,
},
1336: {
slidesPerView: 6,
spaceBetween: 32,
},
}}
className="relative w-10/12 mx-auto flex flex-row"
>
<div className="absolute inset-y-0 left-0 z-10 flex items-center">
<button class="bg-white -ml-2 lg:-ml-4 flex justify-center items-center w-10 h-10 rounded-full shadow focus:outline-none">
<svg
viewBox="0 0 20 20"
fill="currentColor"
class="chevron-left w-6 h-6"
>
<path
fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
{sportsList.map((item) => {
return (
<SwiperSlide key={item.id}>
<Card item={item} />
</SwiperSlide>
);
})}
<div class="absolute inset-y-0 right-0 z-10 flex items-center">
<button class="bg-white -mr-2 lg:-mr-4 flex justify-center items-center w-10 h-10 rounded-full shadow focus:outline-none">
<svg
viewBox="0 0 20 20"
fill="currentColor"
class="chevron-right w-6 h-6"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
</Swiper>
</>
);
}

Answer 1

To customize previous and next button in swiper.js you should pass NavigationOptions object to navigation instead of true, something like this will do it:
navigation={{
nextEl: ".image-swiper-button-next",
prevEl: ".image-swiper-button-prev",
disabledClass: "swiper-button-disabled"
}}
and then you can use those classnames for your buttons
don't forget to remove this import "swiper/css/navigation"; so it won't override your navigation button styles
you can see an example below

Answer 2

import React from "react";
import sportsList from "../utils/sportsList";
import Card from "./Card";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import { Navigation } from "swiper";
import "swiper/css/bundle";
import SwiperCore from "swiper";
SwiperCore.use([Navigation]);
export default function SliderComponent() {
return (
<>
<Swiper
spaceBetween={50}
slidesPerView={4}
slidesPerGroup={3}
onSlideChange={() => console.log("slide change")}
onSwiper={(swiper) => console.log(swiper)}
grabCursor={true}
navigation={{
prevEl: ".swiper-button-prev",
nextEl: ".swiper-button-next",
}}
breakpoints={{
// when window width is >= 320px
320: {
slidesPerView: 1,
spaceBetween: 24,
},
// when window width is >= 480px
480: {
slidesPerView: 2,
spaceBetween: 24,
},
// when window width is >= 640px
640: {
slidesPerView: 2,
spaceBetween: 24,
},
1024: {
slidesPerView: 4,
spaceBetween: 32,
slidesPerGroup: 1,
},
1336: {
slidesPerView: 6,
spaceBetween: 32,
},
}}
tag="section"
wrapperTag="ul"
id="main"
style={{
"--swiper-navigation-color": "red",
"--swiper-navigation-size": "150px",
}}
className="relative w-10/12 mx-auto flex flex-row"
>
<div className="absolute inset-y-0 left-0 z-10 flex items-center">
<button className=" swiper-button-prev bg-white -ml-2 lg:-ml-4 flex justify-center items-center w-10 h-10 rounded-full shadow focus:outline-none"></button>
</div>