I have 2 select list about sbu list and department list. I want to update department list according to onChange event selected value of sbu list item. but as per my codes it sometimes workd only when I change a value it updates not with currently selected value but works that value which selected value is lost.

I want to update department list on parent selected item but it works past selected item.

import React, { useEffect, useState } from "react";
import Navbar from "../../includes/Navbar";
import DesignationList from "../../bind_list/DesignationList";
import OfficeList from "../../bind_list/OfficeList";
import axios from "axios";
import { BASE_URL } from "../../includes/Config";

const Employee = () => {
  const [selectedSbuId, setSelectedSbuId] = useState("");
  const [states, setStates] = useState([]);
  const [sbuData, setSbuData] = useState();
  const [departmentData, setDepartmentData] = useState();

  
  useEffect(() => {
    fetchSbuData();
  }, []);

  useEffect(() => {
    fetchDepartmentData();
  }, [selectedSbuId]);
  
  const fetchSbuData = async () => {
    try {
      let responseSbu = await axios.post(BASE_URL + '/api/sbu/get_sbu.php', { Name: "IMSL", ResponseType: "list" });
      console.log(responseSbu.data);
      if (responseSbu.data.success && responseSbu.data.resultList.length > 0) {
        setSbuData(responseSbu.data.resultList);
      }
    } catch (error) {
      console.error("Error fetching SBU data:", error);
    }
  };

  const fetchDepartmentData = async () => {
    try {
      let response = null;
      if (selectedSbuId !== "") {
        response = await axios.post(BASE_URL + '/api/department/get_department.php', { SbuId: selectedSbuId, ResponseType: "detail" });
      } else {
        response = await axios.post(BASE_URL + '/api/department/get_department.php');
      }
      console.log(response.data.resultList);
      if (response.data.success && response.data.resultList.length > 0) {
        setDepartmentData(response.data.resultList);
      }
    } catch (error) {
      console.error("Error fetching department data:", error);
    }
  };

  return (
    <div>
      <Navbar />
      <div className="container-fluid">
        <div className="search-box">
          <div className="card">
            <div className="card-header">
              <h5 className="card-title">Card title</h5>
            </div>
            <div className="card-body">
              <div className="row">
                <div className="col-xl-3 col-lg-6">
                  <div className="input-group mb-3">
                    <span className="input-group-text">SBU</span>
                    <select className="form-select select2" id="inputGroupSelect01"
                      onChange={(e) => setSelectedSbuId(e.target.value)}
                      value={selectedSbuId}
                    >
                      <option defaultValue>Select SBU</option>
                      {
                        sbuData && sbuData.map((option) => (
                          <option key={option.id} value={option.id}>{option.name}</option>
                        ))
                      }
                    </select>
                  </div>
                </div>
                <div className="col-xl-3 col-lg-6">
                  {(
                    <div className="input-group mb-3">
                    <span className="input-group-text">Department</span>
                    <select className="form-select select2" id="inputGroupSelect01">
                      <option defaultValue>Select Department</option>
                      {
                        (
                          departmentData &&
                          departmentData.map((option)=>{
                              return <option key={option.id} value={option.id}>{option.name + "-" + option.sbu_name}</option>
                          })
                        )
                      }
                    </select>
                  </div>
                  )}
                </div>
                <div className="col-xl-3 col-lg-6">
                  <DesignationList/>
                </div>
                <div className="col-xl-3 col-lg-6">
                  <OfficeList/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Employee;

Can’t find where I made a mistake.