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>
    ));
  };

This is the part I get confused, I want to display all the cards if the target value is "All" and when I select the target value in the dropdown, it'll display all the cards based on the location I selected.

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

 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>
    );
  });

```
I displayed it like this:
```

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>
  );

```