Swiper React Mouse-wheel Scrolling and Keyboard Control Not Working - reactjs

Question

Using the mouse-wheel or keyboard to control the sliding in SwiperJs for React doesn't work. I can't seem to find anything on it and following Swiper API docs doesn't help either.
Using
react: 17.0.1
swiper: 6.4.11
There's a sandbox setup of it here
const App = () => {
const slides = [1, 2, 3, 4];
return (
<Swiper
slidesPerView={2}
keyboard={{ enabled: true }}
direction="vertical"
mousewheel
>
{slides.map((slide) => (
<SwiperSlide key={slide}>
<h1>Slide</h1>
</SwiperSlide>
))}
</Swiper>
);
};

Answer 1

Please get SwiperCore module to do below:
import SwiperCore, { Keyboard } from 'swiper';
and add following line of code:
SwiperCore.use([Keyboard]);
This should have the keyboard working.

Answer 2

This works for me perfectly.
import SwiperCore, { Keyboard, Mousewheel } from "swiper/core";
SwiperCore.use([Keyboard, Mousewheel]);
const App = () => {
const slides = [1, 2, 3, 4];
return (
<Swiper
slidesPerView={2}
keyboard={true}
direction="vertical"
mousewheel={true}
>
{slides.map((slide) => (
<SwiperSlide key={slide}>
<h1>Slide</h1>
</SwiperSlide>
))}
</Swiper>
);
};

Answer 3

Not a proper solution but for anyone interested I have come up with a work around.
I was unable to get the mouse-wheel or keyboard controls to work for Swiper using React components or with pure javascript. Official Swiper examples didn't work when replicated so I tried some previous versions. Went all the way back to 5.4.5 to get it work.
Unfortunately 5.4.5 doesn't support React but Swiper can still be incorporated into a React setup.
// import Swiper JS
import Swiper from "swiper/js/swiper";
// import Swiper styles
import "swiper/css/swiper.css";
const SimpleSwiper = () => {
useEffect(() => {
const swiper = new Swiper(".swiper-container", {
direction: "vertical",
mousewheel: true,
keyboard: { enabled: true },
slidesPerView: 1,
});
}, []);
const slides = [1, 2, 3];
return (
<div className="swiper-container">
<div className="swiper-wrapper">
{slides.map((slide) => (
<div
className="swiper-slide"
key={slide}
>{`slide ${slide}`}</div>
))}
</div>
</div>
);
};
You can view the code sandbox here. The keyboard control doesn't seem to work here but it does work locally.