I am creating a form with some handling functions.

This is my functions that handle the events.

const [name, setUsername] = useState("");
  const [age, setAge] = useState("");

  const handleNameChange = (event) => {
    setUsername(event.target.value);
  };
  const handleAgeChange = (event) => {
    setAge(event.target.value);
  };
  const submitFormHandler = (event) => {
    event.preventDefault();
    console.log(name,age);
  };

I use styled component to style my Form tag. import styled from "styled-components";

const Forms = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  & label {
    font-weight: bold;
    margin: 15px;
  }

  & input {
    width: 40%;
    height: 20px;
    cursor: pointer;
  }

  & button {
    margin: 10px;
  }
`;

This is my form.

<Forms onSubmit={submitFormHandler}>
      <label htmlFor="username">Username</label>
      <input id="username" type="text" onChange={handleNameChange} />

      <label htmlFor="age">Age(Years)</label>
      <input id="age" type="number" onChange={handleAgeChange}/>

      <button type="submit">Add User</button>
</Forms>

I use styled components to style the <Form> tag. So , my problem is after I clicked the submit button, I have error on the onSubmit event handler function where name and age of the user input is not displaying on the browser console.

This is the page

After I clicked the submit button, the values are not displaying on the browser console