Need to get an element of the 2nd item of the array when it's clicked, but in react it won't trigger when clicking on it. In this case, we should use querySlectorALL, how I get this element?

 function App () {
  
  const List = props => {
    const listItems = props.items
    return (
      <ul>
        {listItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    )
  }

  let listItem = document.querySelectorAll('li')[1]
  if (listItem) {
    console.log('sadas')
    listItem.click()
  }

  return (
    <div className='App'>
      <List items={['A', 'B', 'C']} />
    </div>
  )
}