Bootstrap-React Carousel Slider only active at top section of div container - slider

Question

I have a carousel imported directly from bootstrap-react. It is functioning fine: it slides on its own, the three nav sliders navigate through the images, the the left slider arrow works perfectly, however, the right slider arrow only seems to have an active hover effect to click and slide at the top of the div. When I inspect the element, it shows up fine. I don't know how to address this issue as I am new to react and bootstrap.
Here is a link showing the behavior:
you can see that the link won't become active
Here is the Carousel Component:
import { Carousel } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";
const ProductCarouselComponent = () => {
const cursorP = {
cursor: "pointer",
};
return (
<Carousel>
<Carousel.Item>
<img
crossOrigin="anonymous"
className="d-block w-100"
style={{ height: "300px", ObjectFit: "cover" }}
src="/images/carousel/carousel-1.png"
alt="First slide"
/>
<Carousel.Caption>
<LinkContainer style={cursorP} to="/product-details">
<h3>Bestseller in Laptops</h3>
</LinkContainer>
<p>Dell Inspiron 15 3000 Laptop, 15.6 inch HD </p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
style={{ height: "300px", ObjectFit: "cover" }}
src="/images/carousel/carousel-2.png"
alt="Second slide"
/>
<Carousel.Caption>
<LinkContainer style={cursorP} to="/product-details">
<h3>Bestseller in Books</h3>
</LinkContainer>
<p>Don Quixote by Miguel de Cervantes (audiobook)</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
style={{ height: "300px", ObjectFit: "cover" }}
src="/images/carousel/carousel-3.png"
alt="Third slide"
/>
<Carousel.Caption>
<LinkContainer style={cursorP} to="/product-details">
<h3>Bestseller in Cameras</h3>
</LinkContainer>
<p>
4k Camcorder Video Camera 60FPS 48MP Vlogging Camera for Youtube WiFi 16X Digital Camera
</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
);
};
export default ProductCarouselComponent;
Here is the Home Page where it is imported
import ProductCarouselComponent from "../components/user/ProductCarouselComponent";
import CategoryCardComponent from "../components/user/CategoryCardComponent";
import { Row, Container } from "react-bootstrap";
const HomePage = () => {
const categories = [
"Tablets",
"Monitors",
"Games",
"Printers",
"Software",
"Cameras",
"Books",
"Videos",
];
return (
<>
<ProductCarouselComponent />
<Container /*className="bg-dark"*/>
<Row xs={1} md={2} /*lg={3}*/ className="g-4 mt-5">
{categories.map((category, idx) => (
<CategoryCardComponent key={idx} category={category} idx={idx} />
))}
</Row>
</Container>
</>
);
};
export default HomePage;
Here is the package.json page:
{
"name": "mernstack-ecommerce-site",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.2",
"bootstrap-icons": "^1.9.1",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-dom": "^18.2.0",
"react-router-bootstrap": "^0.26.2",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}