Here i have some React code ->

React refs

 const noteTitleRef = React.createRef();
 const noteBodyRef = React.createRef();

Button component

           <LoadingButton
                  color="secondary"
                  onClick={() => {
                    setLoading(true);
                      addNote(noteTitleRef.current.value, noteBodyRef.current.value);
                      setLoading(false);
                  }}
                  loading={loading}
                  loadingPosition="start"
                  startIcon={<SaveIcon />}
                  variant="contained"
                >
                  Save
                </LoadingButton>

If i change Button component to

           <LoadingButton
                  color="secondary"
                  onClick={() => {
                    setLoading(true);
                    setTimeout(() => {
                      addNote(noteTitleRef.current.value, noteBodyRef.current.value);
                      setLoading(false);
                    }, 1000);
                  }}
                  loading={loading}
                  loadingPosition="start"
                  startIcon={<SaveIcon />}
                  variant="contained"
                >
                  Save
                </LoadingButton>

Then the noteTitleRef.current.value & noteBodyRef.current.value becomes null and doesn't work.

How do i get around this? I would like to set a delay to my onClick, and after 1 second then i want the addNote() function to fire passing the noteTitleRef.current.value, noteBodyRef.current.value as parameters.

I appreciate all feedback!