I have this child component where you can submit a form, however, e.preventDefault() does not work

From the parent component. There are other forms, hence, there is a conditional form where it will used the child component’s form.

A user may click the button to show the form from the child component.

  const [isTrue, setIsTrue] = useState(false);
   <ButtonForm onClick={() => setIsTrue(true)}>
        Click for the Form
    </ButtonForm>

 {isTrue == true ? (
    <Form
        data={entryData}
        items={items}
        names={names}
            />
  ) : (
      ></>
    )}

This is the child component. The problem here is that, everytime I’ll submit it, it will reload the page:

const Form = ({ entryData, items, names }) => {
  const handleSubmit = (e) => {
    e.preventDefault();
    try {
      console.log(" saved");
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <>
    
      <form onSubmit={handleSubmit}>
        //some codes here
        <Grid item>
          <TextField
            type="text"
            label="Item Number"
            variant="outlined"
            fullWidth
            required
          />
        </Grid>
       //some codes here
        <Grid item>
          <Button type="submit" fullWidth>
            Submit
          </Button>
        </Grid>
      </form>
      <br /> <br />
    </>
  );
};

export default Form;