Render a colours array and return it in a div gives the error Object literal may only specify known properties

Question

So I created a simple slideshow where I want to return a div in the given color from the array here. But the style={{ item }} in my div after map returns the error:

Type '{ item: string; }' is not assignable to type 'Properties<string | number, string & {}>'.
  Object literal may only specify known properties, and 'item' does not exist in type 'Properties<string | number, string & {}>'.ts(2322)
index.d.ts(1850, 9): The expected type comes from property 'style' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

import React, { useEffect, useRef, useState } from "react";

export function Slideshow() {
  const colors = ["#0088FE", "#00C49F", "#FFBB28"];
  const delay = 2500;

  const [index, setIndex] = useState(0);
  const timeoutRef = useRef(null);

  function resetTimeout() {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
  }

  useEffect(() => {
    resetTimeout();
    timeoutRef.current = setTimeout(
      () =>
        setIndex((prevIndex) =>
          prevIndex === colors.length - 1 ? 0 : prevIndex + 1
        ),
      delay
    );

    return () => {
      resetTimeout();
    };
  }, [index]);

  return (
    <div className="my-0 mx-auto overflow-hidden max-w-lg">
      <h2 className="text-4xl font-bold text-center text-white mb-8">
        Image Carousel
      </h2>
      <div
        className="whitespace-nowrap ease-in duration-1000"
        style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
      >
        {colors.map((item, index) => {
          return (
            <div
              className="inline-block h-96 w-96 rounded-4xl p-10"
              key={index}
              style={{ item }}
            >
            </div>
          );
        })}
      </div>
      <div className="text-center">
        {colors.map((_, index) => (
          <div
            key={index}
            className={`inline-block h-5 w-5 rounded-full cursor-pointer mt-4 mx-2 mb-0 bg-slideshow${
              index === index ? "bg-slideshow2" : ""
            }`}
            onClick={() => {
              setIndex(index);
            }}
          ></div>
        ))}
      </div>
    </div>
  );
}

So first I tried to quick solve it with a dirty solution and did style={{ item } as any }. Also the timeoutRef I had to do with any const timeoutRef = useRef(null) as any;

But still I cant get it to display the colors in my slideshow, its blank. And ultimately I would like to get rid of the any but I am not sure what the correct solution in this case would be?

The CSS here I use is Tailwind, if thats relevant.