When I write this code:

import React, { useState } from "react";

export default function App() {
  const [email, setEmail] = useState("student@example.com");

  return (
    <div>
      <input
        type="text"
        name="name"
        value={email}
      />
    </div>
  );
}

And run on the browser. This gives me this Warning:

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

How can I solve this?