Type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <div />

I have been trying to implement React skeleton and I have received this error message:

type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <div />. Did you accidentally export a JSX literal instead of a component?

Except for part, everything worked without any problem.

I have tried followings.

1. Checked there is no wrong spelling
2. mistakes in import and export
3. Replacing and string, "loading..." and "loading..." displayed while the app is being loaded.

Please help me.

The followings are my codes

Weather.js:

import React, { useState } from "react";
import WeatherInfo from "./WeatherInfo";
import WeatherForecast from "./WeatherForecast";
import "./Weather.css";
import axios from "axios";
import "react-loading-skeleton/dist/skeleton.css";
import SkeletonLoading from "./skeletons/SkeletonLoading";

export default function Weather(props) {
  const [city, setCity] = useState(props.defaultCity);
  const [weather, setWeather] = useState({ ready: false });

  function showWeather(response) {
    setWeather({
      ready: true,
      coordinates: response.data.coord,
      city: response.data.name,
     
    });
  }

  function handleSubmit(event) {
    event.preventDefault();
    search();
  }

  function updateCity(event) {
    setCity(event.target.value);
  }
  function search() {
    let apiKey = ``;
    let units = "metric";
    let apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=${units}`;
    axios.get(apiUrl).then(showWeather);
  }

  if (weather.ready) {
    return (
      <div className="container">
        <form onSubmit={handleSubmit}>
          <input
            className="input-window"
            type="search"
            onChange={updateCity}
          />
          <input className="search-button" type="submit" value="Search" />
        </form>
        <WeatherInfo data={weather} />
        <hr />
        <WeatherForecast coordinates={weather.coordinates} />
      </div>
    );
  } else {
    search();
    <SkeletonLoading />;
  }
}

SkeletonLoading.js:

import Skeleton from "react-loading-skeleton";
import "./SkeletonLoading.css";

const SkeletonLoading = () => {
  return (
    <div>
      <div className="skeleton-one">
        <Skeleton count={1} />
      </div>
    </div>
  );
};

export default SkeletonLoading();

Do not execute SkeletonLoading component when exporting.

Replace the last line of SkeletonLoading.js with export default SkeletonLoading;

If you execute the component, basically it will export the return value of the function / component. In this case a JSX literal.