cannot reach mapped li element inside of html collection

I have a small react search app where I search datas and I put 5 datas per page
I want to reach the li element’s length ( i mapped user names in a li tag in my Posts component )

However when I consoled log below code , it is an empty array
" const el = document.getElementsByClassName("list-group-item")
console.log(el) "

I tried to reach without mapping method, it works properly however since there is a mapping inside of the tag, it gives me an empty array.

How can i reach li element’s length here ? also I attach the console result

below is my code of my components

import React, {useState} from 'react';

const Posts = ({ posts }) => {
  const [searchTerm,setSearchTerm]=useState([]);

  const el = document.getElementsByClassName("list-group-item")
  console.log(el)

  return (
    <div>
      <div>
        <input 
          type="text" 
          placeholder="Type here..." 
          onChange={e => setSearchTerm(e.target.value)}
        />
        <button 
        type="submit"
        >
        Search
        </button>
      </div>
        <ul className='list-group mb-4'>
        {posts.filter(value => {
           if(searchTerm === ""){
              return value
            } else if(value.name.toString().toLowerCase().includes(searchTerm.toString().toLowerCase())){
               return value
              }
        }).map(post => (
          <li key={post.id} className='list-group-item'>
            {post.name}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Posts;

enter image description here