i am trying to submit a form but whenever i submit the form the entire website gets refreshed i dont want that to happen i want to submit the form without refreshing

import { useEffect, useState } from "react";
import axios from "axios";
export default function Add() {
  const [close, setClose] = useState(false);
  const [allValues, setallValues] = useState("");

  function closeDialog() {
    setClose(true);
  }
  function changeHandler(e) {
    setallValues(e.target.value);
  }
  const submitValue = (e) => {
    e.preventDefault();
    const symptom = allValues;

    const { name } = e.target.dataset;
    const Data = {
      add: allValues,
    
    };
    console.log(allValues);
    //setAllValues({ ...all
    const headers = {
      Authorization: `token ` + localStorage.getItem("token"),
    };
    axios
      .post("apiadd/", Data, {
        headers: headers,
      })
      .then(() => {
        alert(" submitted");
      })
      .catch((error) => {
        alert("Cannot add  again");
      });
  };
  return (
    <>
      {close ? null : (
        <div style={styles.cover}>
          <h3>Add New </h3>
          <hr />

          <form style={styles.form} onSubmit={submitValue}>
            <span>add</span>
            <input
              style={styles.input}
              type="text"
              onChange={changeHandler}
              defaultValue={allValues}
              //value=""
            />
            <input style={styles.sbtn} type="submit" value="ADD" />
          </form>
          <button style={styles.dbtn} onClick={closeDialog}>
            Done
          </button>
        </div>
      )}
    </>
  );
}

i am trying to submit a form but whenever i submit the form the entire website gets refreshed i dont want that to happen i want to submit the form without refreshing