Button creates vertical gap in grid, button doesn't

import React from "react";
import "./styles.css";

export default function App() {
  const images = [1, 2, 3, 4, 5, 6,7,8,9];
  const aspectRatio = "16/9";
  return (
    <ul className="group grid transform grid-cols-5 gap-1">
      {images.map((image, index) => (
        <li
          key={image}
          style={{ aspectRatio }}
          className="cols-span-1 relative transform duration-200 hover:!scale-110 group-hover:scale-100"
        >
          <button
            className="relative h-full w-full"
            onClick={() => setCurrentImageIndex(index)}
          >
            <div className="h-full w-full bg-red-500"></div>
          </button>
        </li>
      ))}
    </ul>
  );
}

import React from "react";
import "./styles.css";

export default function App() {
  const images = [1, 2, 3, 4, 5, 6,7,8,9];
  const aspectRatio = "16/9";
  return (
    <ul className="group grid transform grid-cols-5 gap-1">
      {images.map((image, index) => (
        <li
          key={image}
          style={{ aspectRatio }}
          className="cols-span-1 relative transform duration-200 hover:!scale-110 group-hover:scale-100"
        >
          <button
            className="relative h-full w-full"
            onClick={() => setCurrentImageIndex(index)}
          >
            <div className="h-full w-full bg-red-500"></div>
          </button>
        </li>
      ))}
    </ul>
  );
}