Quiero obtener el valor de entrada en el componente funcional con ganchos. Escribí el código basado en el documento React pero me encontré con este error: ¿Cuál es el problema?

 Line 39:3: Unexpected use of 'name' no-restricted-globals Line 39:10: 'setName' is not defined no-undef Line 40:3: 'phone' is not defined no-undef Line 40:11: 'setPhone' is not defined no-undef Line 42:16: Unexpected use of 'name' no-restricted-globals Line 42:23: 'phone' is not defined no-undef Line 127:55: 'setName' is not defined no-undef

Este es mi código:

 import React , {useState} from 'react' const NewCustomer = () => { [name , setName] = useState(''); [phone , setPhone] = useState(''); const addCustomer= ()=>{ console.log(name , phone); } return ( <CForm action="submit" > <CFormGroup row> <CCol md="3"> <CLabel >Name </CLabel> </CCol> <CCol xs="12" md="9"> <CInput type="text" onChange={e=> setName(e.target.value)} autoComplete="" /> </CCol> </CFormGroup> <CFormGroup row> <CCol md="3"> <CLabel > Phone number</CLabel> </CCol> <CCol xs="12" md="9"> <CInput type="number" onChange={e=> setPhone(e.target.value)} autoComplete="current-tel"/> </CCol> </CFormGroup> <CButton type="submit" onClick={()=> addCustomer()} > Insert </CButton> </CForm> )}