Child component does not render properly

In my code, the parent component is Bucket.js and the child component is the ListItem.js. The parent component makes a call to the db and gets back an object that has a structure of: [{...},{...},{...}], which will be stored into this.state.search.

When I render each child component, only the first <div> tag in <ListItem> displays. Everything after that does not render, I cannot figure out why that is the case.

Bucket.js

    import React, { Component, useState } from "react";
    import axios from "axios";
    import ListItem from "./ListItem";

    class Bucket extends Component {
      constructor() {
        super();
        this.state = {
          search: [],
        };
      }

      componentDidMount() {
        axios
          .get(`http://localhost:9000/viewCribb`)
          .then((response) => response)
          .then((result) => {
            this.setState({ search: result.data });
            console.log("Search State: ", this.state);
          });
      }


      render() {
        {
          console.log("Rendering!");
        }
        return (
          <>
            {this.state.search ? (
              <>
                {Object.keys(this.state.search).map((item, index) => (
                  <ListItem
                    {...this.props}
                    key={this.state.search[item].address_id}
                    listing={this.state.search[item]}
                  ></ListItem>
                ))}
              </>
            ) : (
              <></>
            )}
          </>
        );
      }
    }

    export default Bucket;

ListItem.js

    import React from "react";
    import classNames from "classnames";
    const ListItem = (...props) => {
      console.log("props", props);
      return (
        <>
          <div>{props[0].listing.streetaddress}</div>
          <div className="tiles-item reveal-from-right" data-reveal-delay="200">
            <div className="tiles-item-inner">
              <div className="testimonial-item-content">
                <p className="text-sm mb-0">{props[0].listing.streetaddress}</p>
              </div>
              <div className="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider">
                <span className="testimonial-item-name text-color-high">
                  Roman Level
                </span>
                <span className="text-color-low"> / </span>
                <span className="testimonial-item-link">
                  <div href="#0">AppName</div>
                </span>
              </div>
            </div>
          </div>
        </>
      );
    };

    export default ListItem;