why PropTypes is not working in these component?

Question

this is my first time with PropTypes and according to some articles and chatGPT, this should work but isn't working in my case. Both activeDot in Dot component and text in CarouselItem component are of any type implicitly.

Please tell me what's wrong in this.

Thanks.

import PropTypes from 'prop-types'
import { useState } from 'react'

interface ItemTextTypes {
  feature: string;
  description: string;
}

const carouselText: ItemTextTypes[] = [
  {
    feature: '100% uptime ',
    description: 'Zero Infrastructure Management',
  },
  {
    feature: 'Effortless Scalability ',
    description: 'Seamlessly handle high traffic loads',
  },
  {
    feature: 'Uninterrupted Performance ⚡️',
    description: 'Deliver exceptional user experiences, always',
  },
];

const Carousel = () => {
    const [activeItem, setActiveItem] = useState(0)

  return (
    <div className="carousel absolute top-[45%] left-5">
      <div className="carousel-items ">
        {carouselText.map((text, i) => <CarouselItem text={text} key={i} />)}
      </div>
      <div className="carousel-dots relative top-5 flex gap-2">
        {carouselText.map((_, i) => {
            const activeDot = activeItem === i ? 'active-dot' : ''
            return <Dot activeDot={activeDot}/>
        })}
      </div>
    </div>
  );
};

export default Carousel;

const Dot = ({activeDot}) => {
    return (
      <div className={`dot w-1 h-1 bg-grayish transition-5 rounded ${activeDot}}`}></div>
    );
}
Dot.propTypes = {
    activeDot: PropTypes.string.isRequired
}

const CarouselItem = ({text}) => {
  return (
    <div className="carousel-item-1 flex flex-col">
      <span className="feature text-[38px] font-semibold ">{text.feature}</span>
      <span className="description text-[20px] text-grayish ">
        {text.description}
      </span>
    </div>
  );
};

CarouselItem.propTypes = {
    text: PropTypes.shape({
        feature: PropTypes.string.isRequired,
        description: PropTypes.string.isRequired
    }).isRequired
}