I'd like to render the use effect per map()

Question

I want to repeat the components through the map and display the information that received the aixos on each tag, but when I checked, only the last value of the repetition is being posted. When I printed it out as console, the value of searchHospitalAdd, searchHospitalName didn't change immediately, and it seems that only the last value is included

Value is not reflected through usestate() Why is it like this? Am I using it wrong? Or is the problem with the time to reply after sending the post request? I don't think this is right, but I don't know

I mean the SetPendPatientView tag! We're developing React and Django drf

I want you to give me a solution

const Hospitals = () => {
    const state = useLocation().state;
    const [hospitals, setHospitals] = useState([]);
    const [ScrollActive, setScrollActive] = useState(false);
    const [hospitalInfoModalOn, setHospitalInfoModalOn] = useState(false);
    const [hospitalInfo, setHospitalInfo] = useState([]);
    const [wait_count, setWait_count] = useState('');

    const [searchHospitalAdd, setSearchHospitalAdd] = useState('');
    const [searchHospitalName, setSearchHospitalName] = useState('');

    useEffect(() => {
        axios
            .post('http://localhost:8000/patient/hospital_srch/', { hospitalDep: state.hospital_dep })
            .then(function (response) {
                const hospital = JSON.parse(response.data);
                setHospitals(hospital);
                console.log(state.hospital_dep);
                console.log(hospital);
            })
            .catch(function (error) {
                alert(error);
            });

        return () => {};
    }, [state]);

    useEffect(() => {
        axios
            .post(
                'http://localhost:8000/reservation/wait_search/',
                { hospital_address: searchHospitalAdd, hospital_name: searchHospitalName },
                {
                    headers: {
                        Authorization: `Token ${sessionStorage.getItem('token')}`
                    }
                }
            )
            .then(function (response) {
                setWait_count('안녕');
            })
            .catch(function (error) {
                setWait_count('현재 대기중인 환자가 없습니다.');
            });

        return () => {};
    }, [searchHospitalAdd, searchHospitalName]);

    function SetPendPatientView({ hos_add, hos_name }) {
        setSearchHospitalAdd(hos_add);
        console.log(searchHospitalAdd);
        setSearchHospitalName(hos_name);
        console.log(searchHospitalName);
        // console.log(searchHospitalAdd);
        if (isNaN(wait_count)) {
            return (
                <Typography variant="h4" align="center" style={{ color: '#5E35B1' }}>
                    {wait_count}
                </Typography>
            );
        } else {
            <Typography variant="h4" align="center" style={{ color: '#5E35B1' }}>
                현재 예약대기 인원 : {wait_count}
            </Typography>;
        }
    }

    return (
        <>
            <Box>
                <MainCard
                    title={`${state.hospital_dep}` + ' 목록'}
                    secondary={<SecondaryAction link="https://next.material-ui.com/system/typography/" />}
                >
                    <Grid container spacing={gridSpacing}>
                        <Grid item xs={12} sm={12} md={12} lg={12}>
                            {hospitals.map((hospital) => {
                                return (
                                    <Box
                                        onClick={() => {
                                            setHospitalInfoModalOn(true);
                                            setHospitalInfo(hospital.fields);
                                        }}
                                    >
                                        <SubCard title={`${hospital.fields.hospital_name}`}>
                                            <Box sx={{ mt: 1, mb: 1.5 }}>
                                                <Grid container display="flex">
                                                    <Grid item sx={{ mr: 1.5 }}>
                                                        <Grid container display="grid">
                                                            <Grid item sx={{ mb: 1 }}>
                                                                <FontAwesomeIcon icon={faLocationDot} style={{ color: '#90CAF9' }} />
                                                            </Grid>
                                                            <Grid item>
                                                                <FontAwesomeIcon icon={faPhone} style={{ color: '#90CAF9' }} />
                                                            </Grid>
                                                        </Grid>
                                                    </Grid>
                                                    <Grid item>
                                                        <Grid container display="grid">
                                                            <Grid item sx={{ mb: 0.5 }}>
                                                                <Typography variant="body2">{hospital.fields.hospital_address}</Typography>
                                                            </Grid>
                                                            <Grid item>
                                                                <Typography variant="body2">
                                                                    {hospital.fields.hospital_phone_number}
                                                                </Typography>
                                                            </Grid>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>
                                            </Box>
                                            <Box>
                                                <SetPendPatientView
                                                    hos_add={hospital.fields.hospital_address}
                                                    hos_name={hospital.fields.hospital_name}
                                                />
                                            </Box>
                                        </SubCard>
                                        <br />
                                    </Box>
                                );
                            })}
                        </Grid>
                    </Grid>
                </MainCard>
            </Box>
            <HospitalInfoModal show={hospitalInfoModalOn} onHide={() => setHospitalInfoModalOn(false)} hospital={hospitalInfo} />
        </>
    );
};

export default Hospitals;