Changing background based on weather description using next.js

I am trying to have it so that the background of my weather app will change based on the weather condition using nextjs and the current weather data API. But no image is display. This is my Main

import axios from "axios";
import { useState } from "react";
import Weather from "./Weather";
import Spinner from "./Spinner";
import { data } from "autoprefixer";
import Background from "./Background";

const Main = () => {
  const [city, setCity] = useState("");
  const [weather, setWeather] = useState({});
  const [loading, setLoading] = useState(false);

  //In celsius -(&units=metric) in fahrenheit -(&units=imperial)
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${process.env.NEXT_PUBLIC_WEATHER_KEY}`;

  const fetchWeather = (e) => {
    e.preventDefault();
    setLoading(true);
    axios.get(url).then((response) => {
      setWeather(response.data);
      //   console.log(response.data);
    });
    setCity("");
    setLoading(false);
  }; 

  if (loading) {
    return <Spinner />;
  } else {
    return (
      <div>
        {/* Overlay, so we use a self-closing div */}
        <div className="absolute top-0 left-0 right-0 bottom-0 bg-black/40 z-[1]" />
        <Background
          weatherDescription={data.weather ? data.weather[0].main : null}
        />
        <div className="relative flex justify-between items-center max-w-[500px] w-full m-auto pt-4 text-white z-10">
          <form
            onSubmit={fetchWeather}
            className="flex justify-between items-center w-full m-auto p-3 bg-transparent border border-gray-300 text-white rounded-2xl"
          >
            <div>
              <input
                onChange={(e) => setCity(e.target.value)}
                className="bg-transparent border-none text-white focus:outline-none text-2xl"
                type="text"
                placeholder="Search"
              />
            </div>
            <button onClick={fetchWeather}>
              <BsSearch size={20} />
            </button>
          </form>
        </div>

        {weather.main && <Weather data={weather} />}
      </div>
    );
  }
};

And this is the background component

import React from "react";
import img1 from "../public/assets/Rainy weather.jpg";
import img2 from "../imgs/Cloudy Weather.jpg";

function Background(props) {
  const images = [
    {
      name: "Rain",
      background: img1,
    },
    {
      name: "Clouds",
      background: img2,
    },
  ];
  const imgURL = images.find((el) => el.name === props.weatherDescription)
    ?.background;
  return (
    <div className="-z-10">
      <img
        src={imgURL}
        className="object-cover w-full min-h-scren"
        key={imgURL}
      />
    </div>
  );
}
export default Background;

I've tried if statements and functions, but nothing is working, I've found this current template that was working with videos, I've tried to change it to use images, but I can't achieve it. I'm fairly new in coding, so I hope someone can help me.