如何在输入值更改时保持对样式组件输入组件的关注

Question

我正在渲染一个Field组件，该组件使用样式化的组件来构建input字段。我遇到的问题与此question类似。我没有在Field组件中定义App组件，但仍然面临着相同的问题，即每次输入值更改时我都会丢失输入。似乎正在渲染一个新的Field组件，但没有焦点。有什么办法可以防止呈现新的Field组件，还是我必须以某种方式将重点放在每次输入更改上，如果这样做是一种好的做法，或者由于性能或其他原因而应避免使用问题？如果需要更多详细信息或上下文，我创建了github repo here。 Codesandbox with example of issue here

const App = () => {
  const [emailVal, setEmailVal] = useState("");
  const [passwordVal, setPasswordVal] = useState("");

  const handleChange = e => {
    if (e.target.name === "email") {
      setEmailVal(e.target.value);
      return;
    }

    setPasswordVal(e.target.value);
  };

  return (
    <Box as="form">
      <Field
        data={{
          name: "email",
          type: "text",
          placeholder: "enter email",
          label: "email"
        }}
        errors={[]}
        value={emailVal}
        onChange={handleChange}
      />
      <Field
        data={{
          name: "password",
          type: "password",
          placeholder: "enter password",
          label: "email"
        }}
        errors={[]}
        value={passwordVal}
        onChange={handleChange}
      />
    </Box>
  );
};

const Field = ({ data: { name, type, placeholder, label }, value, onChange }) => {

  return (
    <Box>
      <Box
        value={value}
        onChange={onChange}
        as='input'
        name={name}
        placeholder={placeholder}
      />
    </Box>
  );
};