Communication between two components using ReactJS

I'm having trouble communicating between two components using React.

Here are the codes:

File Search.js:

const Search = (props) => {
  const [items, setItems] = React.useState(null);
  const [input, setInput] = React.useState("");

  const apiKey = "*********";

  async function handleSubmit(event) {
    event.preventDefault();

    await fetch(
      `https://geo.ipify.org/api/v1?apiKey=${apiKey}&ipAddress=${input}`
    )
      .then((response) => {
        console.log(response);
        return response.json();
      })
      .then((result) => {
        console.log(result);
        setItems(result);
      });
  }

  const handleChange = (event) => {
    setInput(event.target.value);
  };

  return (
    <div>
      <form onSubmit={handleSubmit} className="my-wrap">
        <input
          type="text"
          className="searchTerm"
          placeholder="Search for any IP adress or domain"
          value={input}
          onChange={handleChange}
        />
        <button type="submit" className="searchButton">
          {" "}
          <img src={RightIcon} alt="icon" />{" "}
        </button>
      </form>
    </div>
  );
};

export default Search;

File Results.js:

const Results = (props) => {
  const { ip, city, country, postalCode, timezone, isp } = props;

  return (
    <div>
      <div className="grid-container2">
        <div className="container-pop">
          <div>
            <h2 className="title-span"> IP Address </h2>
            <p> {ip} </p>
          </div>
          <div>
            <h2 className="title-span"> Location </h2>

            <p>
              {city}, {country}
            </p>

            <p> {postalCode} </p>
          </div>

          <div>
            <h2 className="title-span"> Timezone </h2>
            <p> UTC {timezone} </p>
          </div>

          <div>
            <h2 className="title-span"> ISP </h2>
            <p> {isp} </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Results;

What I am not able to do is the communication between them, for example: I do the Google IP search 8.8.8.8, the console returns me all right with the information, but I can't pass this information to Results.js, to take them and print them on canvas. If I do it in the same component (Search.js) it comes out on the screen, but the styling of the CSS gets messy. Is there a way to make this communication between these two components?

current output

expected output