TypeError Cannot read properties of null (reading 'firstElementChild')

useEffect(() => {
    setTimeout(() => {
      if (
        document.getElementById("user_list").firstElementChild &&
        dataLocal.length != 0
      )
        document.getElementById("user_list").firstElementChild.click();
    }, 500);
  }, [dataLocal, datePickerDate]);

I get the error in this useEffect hook even though the user_list is present in the DOM. My component returns the following elements:

return (
    <ul className="user-list" id="user_list">
      {dataLocal[0] == undefined
        ? dataLoader.map(() => <AgentListLoader />)
        : dataLocal.map((agentData) => (
            <User key={agentData.contact_id} user={agentData} />
          ))}
    </ul>
  );

What might be the reason for this issue? I found this issue in Sentry issue tracker.Thanks!!

Edit: This is the parent component:

import React,{useState} from "react";
import DropDown from "./dropDown";
import SearchBar from "./userSearchBar";
import QaScores from "./qaScores";
import UserList from "./userList";
import { CallDetails } from "../main/callDetails";
import LeadDropDown from "./leadDropDown";
import Util from "../commons/util";
export const SelectedUserContext = React.createContext({});

const qaAudit = () => {
  const [selectedUserData, setSelectedUserData] = useState(null);
  const [selectedUserInQATable, setSelectedUserInQATable] = useState(null);
  const [userdataSelectedInQA, setUserdataSelectedInQA] = useState([]);
  const [agentsData, setAgentsData] = useState([]);
  const [dataLocal, setDataLocal] = useState([]);
  const [filterUser, setFilterUser] = useState({
    searchText: ""
  });
  const appUrl = Util.getDomain();

  return (
    <section className="section-wrapper qa-teamaudict-wrp show">
       <SelectedUserContext.Provider value={{selectedUserData, setSelectedUserData,selectedUserInQATable, setSelectedUserInQATable,
       userdataSelectedInQA, setUserdataSelectedInQA, agentsData, setAgentsData, dataLocal, setDataLocal, appUrl, setFilterUser}}>
      <aside className="qa-evaluation-userinfo" id="qa_eval_comp_id">
       <DropDown />
       <SearchBar filterCallback = {setFilterUser} />
      <UserList filterUser = {filterUser} />
      </aside>
      ...
      </SelectedUserContext.Provider>
    </section>
  );
};

export default qaAudit;

This is the complete code for the component I'm talking about

import React, { useContext, useEffect } from "react";
import User from "./user";
import axios from "axios";
import { UserContext, DateContext } from "../../store";
import { SelectedUserContext } from "./qaAudit";
import AgentListLoader from "./agentListLoader";
import CONSTANTS from "../../../common/util/constants";
import Util from "../commons/util";
function userList(props) {
  const { searchText } = props.filterUser;
  const { contactInfo } = useContext(UserContext);
  const { agentsData, setAgentsData} = useContext(SelectedUserContext);
  const { dataLocal, setDataLocal, setSelectedUserData } = useContext(SelectedUserContext);
  const { datePickerDate } = useContext(DateContext);
  let dataLoader = [{},{},{},{}];

  useEffect(() => {
    async function getAgents(leadContactId) {
      let params = {"teamId":leadContactId};
      let { accessToken } = await Util.getAccessToken();
      let headers = {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${accessToken}`
            };
      let teamList = await axios.post(CONSTANTS.TEAMSENDPOINT,params,{headers:headers});
      let agentsList_data = (teamList.data.teams ? teamList.data.teams[0].lead.members : []);
      agentsList_data && typeof agentsList_data.sort === "function" && agentsList_data.sort(function(a, b) {
        let textA = a.login_email.toUpperCase();
        let textB = b.login_email.toUpperCase();
        return Util.compareTwoNumbers(textA,textB);
    });
      setAgentsData(agentsList_data);
      setDataLocal(agentsList_data);
    }
    if(!Util.isAdmin(contactInfo.position) 
    && contactInfo.position != "CX Operations Leader"
    && !Util.isSeniorLead(contactInfo.position))
    {
    getAgents(contactInfo.contactId);
    }
  }, []);

  useEffect(() => {
    if (!document.getElementById("selected_lead_DropDown_Id")) {
      document
        .getElementById("qa_eval_comp_id")
        .classList.remove("has-leaddropdown");
    }
  }, []);

  useEffect(() => {
    let _filterData;
    if (searchText != "") {
      _filterData = agentsData.filter((val) => {
        if (
          val.login_email.includes(searchText.toLowerCase()) ||
          val.login_email.includes(searchText.toLowerCase().replace(/ /g, "."))
        )
          return val;
      });
      setDataLocal(_filterData);
      setSelectedUserData([]);
    }
    if (searchText == "") {
      setDataLocal(agentsData);
    }
  }, [searchText, agentsData]);

  useEffect(() => {
    if (dataLocal.length == 0) {
      setSelectedUserData([]);
    }
  }, [dataLocal]);

  useEffect(() => {
    setTimeout(() => {
      if (
        document.getElementById("user_list").firstElementChild &&
        dataLocal.length != 0
      )
        document.getElementById("user_list").firstElementChild.click();
    }, 500);
  }, [dataLocal, datePickerDate]);

  return (
    <ul className="user-list" id="user_list" data-testid="user-list-test">
      {dataLocal[0] == undefined
        ? dataLoader.map(() => <AgentListLoader />)
        : dataLocal.map((agentData) => (
            <User key={agentData.contact_id} user={agentData} />
          ))}
    </ul>
  );
}

export default userList;