Estoy tratando de enviar un formulario, pero cada vez que envío el formulario, todo el sitio web se actualiza. No quiero que eso suceda. Quiero enviar el formulario sin actualizar.

 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> )} </> ); }

Estoy tratando de enviar un formulario, pero cada vez que envío el formulario, todo el sitio web se actualiza. No quiero que eso suceda. Quiero enviar el formulario sin actualizar.