How can I change this with React&Typescript?

Data file

import Alternance from '../Images/HomeTop/Alternance.jpg';

export const images = [
  {
    title: 'Alternance',
    subtitle: 'Je cherche une Alternance.',
    img: Alternance,
  },
];

Browser file

import React, { useState } from 'react';
import '../../../Styles/top.css';

import { images } from '../../../Data/HomeTopData';

export const Top = () => {
  const [slideImg, setslideImg] = useState(0);
  const delay = 6000;

  React.useEffect(() => {
    setTimeout(
      () =>
        setslideImg((prevslideImg) =>
          prevslideImg === images.length - 1 ? 0 : prevslideImg + 1,
        ),
      delay,
    );
  }, [slideImg]);

  return (
    <div className="Top">
      <div
        className="slideContainer"
        style={{ backgroundImage: `url(${images[slideImg].img})` }}
      >
        <div className="textBox">
          <h1>{images[slideImg].title}</h1>
          <hr />
          <p>{images[slideImg].subtitle}</p>
        </div>
      </div>
      <div className="slideControlBar" />
    </div>
  );
};

How can I change this with React&Typescript? How can I change this with React&Typescript? How can I change this with React&Typescript? How can I change this with React&Typescript?