Modal is refresh on KeyPress

I know there are question asked before, but I have tried the solution but it’s not working. I have split the component differently but then also it refresh on every single keypress.

    const TenementRegistration = () => {

   const [show, setShow] = useState(false);
   const [name, setName] = useState("");
   const [editId, setEditId] = useState("");
    
    function Example() {

  

    const onSubmitHandler = async () => {
      
      const data = {
        name: name
    }
     await services.postService("User", data).then((res) => {
              onGetUserData();
            });
    }

    return(

          <Modal
          show={show}
          onHide={() => setShow(false)}
          size="lg"
          aria-labelledby="example-custom-modal-styling-title"
          scrollable="true"
          centered
          animation="true"
        >
          <Modal.Header closeButton>
            <Modal.Title id="example-custom-modal-styling-title">
              Add User
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <div className="form-container">
              <form>
                <Row>
                  <div className="form-group col-12 col-md-6 center">
                    <label for="inputName" className="asy-FormLabel">
                      Name
                    </label>
                    <input
                      type="text"
                      className="form-control asy-InputValues"
                      id="policyName"
                      placeholder="Enter Property Id"
                      onChange={(e) => {
                        setName(e.target.value);
                      }}
                      value={Name}
                      required
                    />
                  </div>
</Row>
              </form>
</div>
</Modal.Body>
          <Modal.Footer>
            <button
              type="button"
              className="submit-button"
              onClick={() => 

    {
              
    
          onSubmitHandler();
                  }}
                >
                  Submit
            </button>
</Modal.Footer>
        </Modal>

    const [data, setData] = useState([]);

  useEffect(() => {
    onGetUserData();
  }, []);

  const onGetUserData = async () => {
    services.getService("User").then((res) => {
      setData(res.data);
    });
  };
const onEditData = async (id) => {
setShow(true);
 const newData = data.filter((obj) => obj.id === id)[0];
 setName(newData.name);
}
//Table where we show name and pass id to update button
}

I have also tried to Split the Modal and separate the form (not in this example) but it didn’t work any suggestions how to handle the modal problem