Next Js Form Values Disappear

I have a form that takes data as well as images. Everything works fine till you leave the tab and come back or on mobile, when you try uploading images it opens a folder on full screen where you can choose. Once back to the form it is empty. I wonder why it does that. Even navigating to another tab and coming back clears the whole form


import React, { useState } from "react";
import styled from "styled-components";
import DragAndDrop from "./DragAndDrop";

function Form({ category }) {
  const [Name, setName] = useState("");
  const [Title, setTitle] = useState("");

  return (
        <StyledForm onSubmit={SendPost}>
          <div className="mb-14">
            <StyledP type="Name : ">
                placeholder="TYPE Name product name"
                onChange={(e) => setName(}
            <StyledP type="Title : ">
                placeholder="Type the Title"
                onChange={(e) => setTitle(}
            <StyledP type="Import photos (10 Photos Max) : " />
            <div className="mt-2">
              <DragAndDrop />
          <div className="-mt-8 flex justify-center">
            <button type="submit">Post</button>

const H2 = styled.h2`
const StyledInput = styled.input`
const StyledP = styled.p`
const StyledForm = styled.form`
export default Form;