Would anyone be able to further explain the use of the spread operator in this case?

I understand what the spread operator does, and (I think) I even understand what it's doing here, but I can't seem to find the documentation to really explain it.

How is this...:

const PlanetList = (props) => {
  return (
    <div className="container">
      {props.planets.map((planet) => (
        <Planet {...planet} key={planet.id} />
      ))}
    </div>
  );
};

...the same as this:

const PlanetList = (props) => {
  return (
    <div className="container">
      {props.planets.map((planet) => (
        <Planet
          key={planet.id}
          url={planet.url}
          name={planet.name}
          desc={planet.desc}
          diameter={planet.diameter}
          moons={planet.moons}
        />
      ))}
    </div>
  );
};

Am I correct in assuming that the spread operator (in this case) spreads the current object and creates new component properties that use the current object property as the name, and sets the value to the corresponding property of the current object being mapped over? Does this also mean the spread operator will only work if the properties of the object and the properties of the component has the exact same name?

Thanks in advance! I've just never used the spread operator this way before.