Move InputCountry outside the EventSignup component, because everytime a value was entered inside country input, it was resulting in re-rendering and recreation of the component. Also, added a value prop on country input to make it controlled input.

import React, { useState } from "react";

const InputCountry = ({ country, setCountry }) => {
  return (
    <div>
      <input
        placeholder="Country"
        type="country"
        name="country"
        value={country}
        onChange={(e) => setCountry(e.target.value)}
      />
    </div>
  );
};

const EventSignUp = (props) => {
  let [email, setEmail] = useState("");
  let [name, setName] = useState("");
  let [zip, setZip] = useState("");

  let [agreeTerms, setAgreeTerms] = useState(false);
  let [rememberMe, setRememberMe] = useState(false);
  let [country, setCountry] = useState("");

  return (
    <form id="form_login_email" method="post">
      <input
        placeholder="Name*"
        type="name"
        name="name"
        onChange={(e) => setName(e.target.value)}
      />
      <input
        placeholder="E-mail*"
        type="email"
        name="email"
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        placeholder="E-mail again*"
        type="email"
        name="email"
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        placeholder="Zip/Postal Code"
        type="zip"
        name="zip"
        onChange={(e) => setZip(e.target.value)}
      />
      <InputCountry country={country} setCountry={setCountry} />
    </form>
  );
};

export default EventSignUp;