I want to get input value in functional component with hooks. Wrote the code based on the React doc but I faced with this error : What is the problem?

 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
  

This is my code :

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