Aquí tengo algo de código React ->

Reaccionar referencias

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

Componente de botón

 <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>

Si cambio el componente Button a

 <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>

Luego, noteTitleRef.current.value & noteBodyRef.current.value se vuelve nulo y no funciona.

¿Cómo soluciono esto? Me gustaría establecer un retraso en mi onClick , y después de 1 segundo, quiero que la función addNote() se active pasando noteTitleRef.current.value , noteBodyRef.current.value como parámetros.

¡Agradezco todos los comentarios!