How to filter through cards based on the value using onChange when selected in a dropdown

This is how I filter to get the string of objects from an array of objects displayImages which I got the the value of dropdown

  const locationNameDropdown = () => {
    return displayImages.map((data, key) => (
      <option key={key} value={data.locationName}>
        {data.locationName}
      </option>
    ));
  };

Here is my {onChange}

 const onChange = (e) => {
    if (e.target.value === "All") {
      setDisplayImages(null);
    } else {
      setDisplayImages([e.target.value]);
    }
  };

This is my card display

 const images = displayImages.map((data, key) => {
    return (
      <div key={key}>
        <div className="card bg-light mb-3" value={data.locationName}>
          <div className="card-header">
            <center>
              <h5>{data.locationName}</h5>
            </center>
          </div>
          <div className="card-body">
            <div className="mrtgDiv">
              <img src={data.filePath}  />
            </div>
          </div>
        </div>
      </div>
    );
  });

and this is the return

  return (
    <div>
      <div>
        <select className="form-select" onChange={onChange}>
          <option value="All" defaultValue>
            All
          </option>
          {locationNameDropdown()}
        </select>
      </div>
      <br />
      <br />

      <center>
        <h5>test</h5>
      </center>
      <div>{images}</div>
    </div>
  );

when I select the first item in the dropdown, I only get a blank card that has no value and when I select the “All” value I receive null I don’t know what to put in the IF ELSE

I want to display the images in a card that I select