React ref stays null with React Bootstrap Carousel

Two years ago with React v16.13.1 and React Bootstrap v1.2.2 this problem didn't exist. After updating to the latest versions (React 18.2.0 and Bootstrap 2.5.0), the refs suddenly became empty.

Old version of the code

let itemRef = useRef(slidesData.map(() => createRef()));
ref={itemRef.current[index]}

And new one

const slidesData = ["Slide 1", "Slide 2"];
const [index, setIndex] = useState(0);
let itemRef = useRef([]);
const handleSelect = (selectedIndex) => {
  setIndex(selectedIndex);
};
const setRef = (element) => {
    console.log("Adding ref: ", element);
    return (itemRef.current = [...itemRef.current, element]);
  };
const slides = slidesData.map((slide, index) => {
  return (
    <Carousel.Item
      key={index}
      ref={setRef}
      className="bg-dark"
      >
      <div className="container py-5">
        <h2 className="text-center text-white">{slide}</h2>
      </div>
    </Carousel.Item>
  );
});

Does not work.

Googling returned no results. This usually means that I am making a simple mistake somewhere. Can anyone help me with this problem?

Here is the link to the sandbox with the code Edit on codesandbox