onChange function is preventing me to change input

I'm trying to set an input's value that's popping up on a button click into an instance threw a handle function.

const SettingsPage = () => {
const [isNewOpen, setIsNewOpen] = useState(false);
const toggleNewPopup = () => {
setIsNewOpen(!isNewOpen);
}
const [isEditOpen, setIsEditOpen] = useState(false);
const toggleEditPopup = () => {
setIsEditOpen(!isEditOpen);
}
return (
<div>
<div className="container-settings">
<div className="container-buttons">
<button onClick={toggleNewPopup}>Add</button>{isNewOpen && <AccountPopUp
name = ""
phone = ""
email = ""
handleClose={toggleNewPopup}
/>}
<button onClick={toggleEditPopup}>Edit</button>{isEditOpen && <AccountPopUp
id = {account.accountNum}
name = {account.accountName}
phone = {account.phoneNum}
email = {account.email}
handleClose={toggleEditPopup}
/>}
<button>Delete</button>
</div>
<div className="container-outer-settings">
<div className="container-settings">
<label htmlFor="dbFile">קובץ בסיס נתונים</label>
<input type="url" name="dbFile" id="dbFile" />
<label htmlFor="savePath">מיקום שמירת הקבצים</label>
<input type="url" name='savePath' id='savePath' />
</div>
<button>שמירת הגדרות</button>
</div>
</div>
</div>
)
}

The AccountPopUp component:

const AccountPopUp = (props) => {
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [email, setEmail] = useState("");
const handleSubmit= () =>{
axios.put(`http://localhost:9000/api/settings/${props.id}`,{
name, phone, email
}).then(props.handleClose)
.catch((e)=>{
console.log(e);
});
}
console.log(props);
return (
<div className="popup-box">
<div className="box">
<label htmlFor="name">Name</label>
<input type="text" name='name' id='name' value={props.name} onChange={(e)=> setName(e.target.value)}/>
<label htmlFor="phone">Phone</label>
<input type="text" name='phone' id='phone' value={props.phone} onChange={(e)=> {
setPhone(e.target.value); e.preventDefault();}}/>
<label htmlFor="email">Email</label>
<input type="text" name='email' id='email' value={props.email} onChange={(e)=> setEmail(e.target.value)}/>
<button onClick={handleSubmit}>Confirm</button>
<button onClick={props.handleClose}>Cancel</button>
</div>
</div>
)
}

And I cannot change the inputs {"name", "phone", "email"} when I choose update option.

The solutions I run into aren't compatible. Functions like preventDefault, stopPropagation aren't doing the job.
Maybe I was mistaken with my research, but nothing works for me.

Your approach of using a value for input is wrong. There are 2 possible ways you can make your code work. In AccountPopUp component, you're using props.name, and instead of changing the props you're changing the state.

1. You can use the state variable in the input's value prop and then change the state.

2. You can use prop value but you'll have to define your state in the parent component and using callback functions you can change the state of the parent component onchanging the child component.