Is it a bad thing to use window.location.reload instead of a form submit button?

Question

I'm quite new to Web Dev and I'm making a management system app in react. I have a React bootstrap Form that the user can use to edit the details of an entry in a Modal. However, the way things are set up, I can't use the Form Submit event to reload the page after the entry has been changed because the buttons in the Modal need to be in a Form component to use the Form Submit an event. If I were to put the buttons in a Form component in the Modal Footer then it messes with the bootstrap stylings.

Is it a bad thing to just use window.location.reload() in my own onClick event to reload the page after editing?

my handleDetailsChange function will change the details and hide the modal (showing an updated form with all users)

is it bad to call window.location.reload() like this?

const EditRecordComp = (props) => {

  //gets the user details from the context and allows for it to be changed

  const userDetails = useContext(UserDetailsContext)
  //holding the new details in state
  const [newUserName, setNewUserName] = useState(userDetails.Name);
  const [newUserAddress, setNewUserAddress] = useState(userDetails.Address);


  const handleDetailsChange = () => {
    console.log("updating...")
    //updates the record in the server
    Axios.put('http://localhost:3001/updateuser', { newName: newUserName, newAddress: newUserAddress, IDRecord: userDetails.idBillingList })
      .then((response) => {
        console.log("updated client side")
      })
      .catch(error => {
        console.log(error.response)
      })
      .then(() => {
        //closes modal after
        props.handleEditClose();
        window.location.reload();
      });
  }

  return (

    <Modal show={props.showModal}>

      <Modal.Header closeButton>
        <Modal.Title>Edit User Details</Modal.Title>
      </Modal.Header>

      <Modal.Body>
        <Form>
          <Form.Group className="mb-3" controlId="formBasicEmail">
            <Form.Label>Name</Form.Label>
            <Form.Control
              type="email"
              placeholder={newUserName}
              value={newUserName}
              onChange={(e) => setNewUserName(e.target.value)} />
          </Form.Group>

          <Form.Group className="mb-3" controlId="formBasicText">
            <Form.Label>Address</Form.Label>
            <Form.Control
              type="text"
              placeholder={newUserAddress}
              value={newUserAddress}
              onChange={(e) => setNewUserAddress(e.target.value)} />
          </Form.Group>
        </Form>
      </Modal.Body>

      <Modal.Footer>
        <Button variant="secondary" onClick={props.handleEditClose}>
          Close
        </Button>
        <Button variant="primary" type="submit" onClick={handleDetailsChange}>
          Save Changes
        </Button>
      </Modal.Footer>
    </Modal>