Problems with React.cloneElement

Question

I am trying to create a reusable carousel, where carousel items are scrollable and clickable. Carousel item can be any component which is passed as children to Carousel. The problem is that when I try to pass selected state as prop in the child component using React.cloneElement I get this error react docs Unknown prop warning. There are several answers in stack overflow like this that inspired my solutionand this that exposes the problembut with no good answers specific to my situation. My code so far is this:

import React, { useState } from 'react';
import CarouselItem from './CarouselItem';

type Props = {
  children: Array<React.FC>;
};

const Carousel: React.FC<Props> = ({ children }: Props) => {
  const [selected, setSelected] = useState(0);
  const handleSelect: (index: number) => void = (index: number) => {
    setSelected(index);
  };
  console.log('children', children);
  return (
    <div className="flex w-full items-center justify-start overflow-y-scroll">
      {children.map((child, index) => (
        <CarouselItem
          key={`carousel-item${index + 1}`}
          selected={selected}
          index={index}
          child={child}
          handleSelect={handleSelect}
        />
      ))}
    </div>
  );
};

export default Carousel;

    import Link from 'next/link';
import React, { useState, useEffect, createContext } from 'react';

interface Props {
  selected: number;
  index: number;
  child: JSX.Element;
  handleSelect: (index: number) => void;
}

const CarouselItem: React.FC<Props> = (props) => {
  const a = 1;
  //   props.child.props.children.props.isSelected = 'true';
  console.log('typeof props.child', typeof props.child.type);
  return (
    <li
      onClick={() => props.handleSelect(props.index)}
      className={`${
        props.selected == props.index ? 'selected' : 'unselected'
      } list-none`}
    >
      {React.cloneElement(props.child, {
        isSelected: 'true'
      })}
    </li>
  );
};

export default CarouselItem;


    const LiveSport: NextPage = () => {
  console.log();
  return (
    <>
      <div className="hidden">
        <SportsSvgIcons />
      </div>
      <Carousel>
        {carouselMockData.map((itemData, index) => (
          <div key={`sport-carousel-${index + 1}`}>
            <CarouselSportItem {...itemData} />
          </div>
        ))}
      </Carousel>
    </>
  );
};

export default LiveSport;

The error comes from here:

const CarouselSportItem: React.FC<CarouselSportItemData> = (props) => {
  console.log('props', props);
  const divProps = Object.assign({}, props);
  delete divProps.isSelected;
  return (
    <div
      className={``}
    >
      <Link href={`${props.sportCode}`}>
        <div>
          <div>
            <div>{`${props.name}`}</div>
          </div>
          <div>
            <div>
              {props.isSelected}
            </div>
          </div>
        </div>
      </Link>
    </div>
  );
};

export default CarouselSportItem;

props.isSelected is not there, and I get this error message:

Warning: React does not recognize the isSelected prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isselected instead. If you accidentally passed it from a parent component, remove it from the DOM element.