Form input gets unfocused after typing in 1 character in Re – Reactjs

I am working on a Full-Stack E-Commerce Web App and facing a problem in the forms.
My forms getting unfocused automatically after typing each word and I have to tap to input again to type. After removing states form is working perfectly. I tried many solutions, rewrite the code but the problem persists. Below I am sharing my react code.
Please guide me as I am a beginner.

import { useState } from "react";
import styled from "styled-components";
import Navbar from "../components/Navbar";
import { mobile } from "../responsive";

function RegisterPage() {
  const Container = styled.div`
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
        rgba(255, 255, 255, 0.5),
        RGBA(255, 255, 255, 0.5)
      ),
      url("https://images.pexels.com/photos/6984661/pexels-photo-6984661.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940")
        center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  `;

  const Wrapper = styled.div`
    padding: 20px;
    width: 40%;
    background: white;
    border-radius: 4px;
    ${mobile({ width: "75%" })};
  `;

  const Form = styled.form`
    display: flex;
    flex-wrap: wrap;
  `;

  const Title = styled.h1`
    font-size: 24px;
    font-weight: 500;
  `;

  const Input = styled.input`
    flex: 1;
    min-width: 40%;
    margin: 20px 10px 0 0;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid grey;
    outline: none;
  `;

  const Agreement = styled.span`
    font-size: 12px;
    margin: 20px 0;
  `;

  const Button = styled.button`
    width: 40%;
    border: none;
    padding: 15px 20px;
    background: teal;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    ${mobile({ width: "80%" })};
  `;

  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");

  function handleSubmit(e) {
    e.preventDefault();
    const userData = {
      firstName,
      lastName,
      username,
      email,
      password,
      confirmPassword,
    };

    fetch("http://localhost:8080/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(userData),
    })
      .then((response) => {
        return response.json();
      })
      .then((responseJSON) => {
        console.log(responseJSON.value);
      });
  }

  return (
    <>
      <Navbar />
      <Container>
        <Wrapper>
          <Title>CREATE ACCOUNT</Title>
          <Form action="/register" method="POST" onSubmit={handleSubmit}>
            <Input
              name="firstName"
              placeholder="first name"
              type="text"
              onChange={(e) => {
                setFirstName(e.target.value);
              }}
              value={firstName}
            />
            <Input
              name="lastName"
              placeholder="last name"
              type="text"
              onChange={(e) => {
                setLastName(e.target.value);
              }}
              value={lastName}
            />
            <Input
              name="username"
              placeholder="username"
              type="text"
              onChange={(e) => {
                setUsername(e.target.value);
              }}
              value={username}
            />
            <Input
              name="email"
              placeholder="email"
              type="email"
              onChange={(e) => {
                setEmail(e.target.value);
              }}
              value={email}
            />
            <Input
              name="password"
              placeholder="password"
              type="password"
              onChange={(e) => {
                setPassword(e.target.value);
              }}
              value={password}
            />
            <Input
              name="confirmPassword"
              placeholder="confirm password"
              type="password"
              onChange={(e) => {
                setConfirmPassword(e.target.value);
              }}
              value={confirmPassword}
            />
            <Agreement>
              By creating an account, I consent to the processing of my personal
              data in accordance with the <b>PRIVACY POLICY</b>
            </Agreement>
            <Button>CREATE ACCOUNT</Button>
          </Form>
        </Wrapper>
      </Container>
    </>
  );
}

export default RegisterPage;

I am working on a Full-Stack E-Commerce Web App and facing a problem in the forms.
My forms getting unfocused automatically after typing each word and I have to tap to input again to type. After removing states form is working perfectly. I tried many solutions, rewrite the code but the problem persists. Below I am sharing my react code.
Please guide me as I am a beginner.

I have reproduced the same error in the sandbox : https://codesandbox.io/s/dawn-frog-sv9ihg?file=/src/App.js

Please guide me to find this bug…