Untitled

import "./Searchbar.css";
// import "./ClearButton.jsx";
import clear from "./images/clear.png";

export function Searchbar(props) {

  const handleChange = (e) => {
    props.setQuery(e.target.value.toLowerCase());
    //props.setQuery({ query: `${e.target.value.toLowerCase()}` });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    props.fetchRecipes();
  };

  return (
    <div>
      <form onSubmit={handleSubmit} className="search-container">
        <input
          onChange={handleChange}
          className="inputbar"
          type="text"
          name="inputSearchBar"
          placeholder="Search for a recipe"
        ></input>
        <button className="searchbutton" type="submit">
          <p className="text-search">SEARCH</p>
        </button>
      </form>
      <button> 
        <img src={clear}></img>
      </button>
    </div>
  );
}

export default Searchbar;

Why can't I import from the map Images even though the source of the pictures are correct?