Ререндер родителя обёртки при изменении в дочернем компоненте

const Page = ({ children, title }) => {
  console.log("Page RE_RENDER");
  return (
    React.createElement("div", null,
    React.createElement("h1", null, title),
    children));
};
 
const title = "SignIn";
const SignIn = () => {
  console.log("SignIn RE_RENDER");
  const [credentials, setCredentials] = React.useState({
    username: "",
    password: "" });
 
  function handleInputChange({ target: { name, value } }) {
    console.log(name, value);
    setCredentials({ ...credentials, [name]: value });
  }
  return (
    React.createElement(Page, { title: title },
    React.createElement("form", null,
    React.createElement("label", null, "username:",
 
    React.createElement("input", {
      name: "username",
      type: "text",
      value: credentials.username,
      onChange: handleInputChange })),
 
 
    React.createElement("br", null),
    React.createElement("label", null, "password:",
 
    React.createElement("input", {
      name: "password",
      type: "password",
      value: credentials.password,
      onChange: handleInputChange })))));
};
 
const App = () => {
  console.log("App RE_RENDER");
  return (
    React.createElement("div", null,
    React.createElement(SignIn, null)));
 
 
};
 
ReactDOM.render(React.createElement(App, null), document.getElementById("root"));

//Page  без изменений
 
//добавлен компонент, в который я вынес все содержимое компонента SignIn
const SignInContent = () => {
  console.log("SignInContent RE_RENDER");
  const [credentials, setCredentials] = React.useState({
    username: "",
    password: ""
  });
  function handleInputChange({ target: { name, value } }) {
    console.log(name, value);
    setCredentials({ ...credentials, [name]: value });
  }
 
  return (
      <form>
        <label>
          username:
          <input
            name="username"
            type="text"
            value={credentials.username}
            onChange={handleInputChange}
          />
        </label>
        <br />
        <label>
          password:
          <input
            name="password"
            type="password"
            value={credentials.password}
            onChange={handleInputChange}
          />
        </label>
      </form>
  );
};
 
 
const title = "SignIn";
const SignIn = () => {
  console.log("SignIn RE_RENDER");
  return (
    <Page title={title}>
      <SignInContent />
    </Page>
  );
};
 
const App = () => {
  console.log("App RE_RENDER");
  return (
    <div>
      <SignIn />
    </div>
  );
};
 
ReactDOM.render(<App />, document.getElementById("root"));