React App using Tailwindcss – Image Responsiveness as Screen Grows the Image Stretches Even though have CSS not to

I tried and looked up all that I could and still not finding any solutions or clues. Someone out there knows and. I appreciate the understanding, thank you.

Code for div’s that house the backgroundImage for the slider – I have tired object-fits, covers..., even in a css file but cannot get the responsiveness to work on the md, lg screens for Tailwindcss or css on the image’s height as the screen gets bigger.

Video shows the response issue as the screen grows and shrinks. Mobile view is what it should be and works as Tailwindcss is mobile first, but cannot control for the larger screens at the moment. Need help on that.

import React, { useState, useEffect } from 'react';
import '../components/HomeSlider.css';
import { images } from '../helpers/HomeSliderData';

let count = 0;

function HomeSlider() {
  const [currentImage, setCurrentImage] = useState(0);

  useEffect(() => {
    startSlider();
  }, []);

  const startSlider = () => {
    setInterval(() => {
      handleNextImage();
    }, 4000);
  };

  const handleNextImage = () => {
    count = (count + 1) % images.length;
    setCurrentImage(count);
  };

  return (
    <div className="max-w-screen-xl h-[420px] ml-auto mr-auto relative">
      <div
        className="w-full h-full flex  bg-center duration-800 absolute"
        style={{
          backgroundImage: `url(${images[currentImage].backgroundImage})`,
        }}
      ></div>
    </div>
  );
}

export default HomeSlider;

Video Demo: https://youtu.be/TZcbqXPAFbc