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

Form.js

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 (
    <>
      <div>
        <StyledForm onSubmit={SendPost}>
          <div className="mb-14">
            <H2>PRODUCT</H2>
            <StyledP type="Name : ">
              <StyledInput
                value={Name}
                placeholder="TYPE Name product name"
                onChange={(e) => setName(e.target.value)}
              />
            </StyledP>
            <StyledP type="Title : ">
              <StyledInput
                value={Title}
                placeholder="Type the Title"
                onChange={(e) => setTitle(e.target.value)}
                required
              />
            </StyledP>
            
            <StyledP type="Import photos (10 Photos Max) : " />
            <div className="mt-2">
              <DragAndDrop />
            </div>
          </div>
          <div className="-mt-8 flex justify-center">
            <button type="submit">Post</button>
          </div>
        </StyledForm>
      </div>
    </>
  );
}

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