페이지 새로고침

안녕하세요. 리액트 강의를 듣고 프로젝트 진행에 도움이 많이 되고 있습니다. 
제가 하는 프로젝트는 헬스장 예약 관련 프로젝트입니다. 
이 과정에서, 운동부위를 선택 시, 해당 운동기구와 관련된 예약 현황을 Nginx로부터 받아 출력해주는 코드를 짜고 있습니다.
ReservationPage를 구성하고 있는 Main 컴포넌트는 Sidebar, SelectedMachinesList 컴포넌트로 이루어져 있고, 각 ToggleButton 컴포넌트로 이루어진
Sidebar 컴포넌트에서 특정 ToggleButton 컴포넌트를 클릭할 경우, api 요청을 보내 데이터를 받아오는 형태 입니다. 받아온 데이터는 SelectedMachineList에 저장되어 화면에 보이게 할 계획입니다.
ReservationPage로 넘어오기 전, SelectPage에서 "예약하기" 버튼을 클릭할 경우, useNavigate('/reservation')함수가 호출되어 넘어옵니다. 
그런데, 왜인지 모르게 ReservationPage의 토글 버튼을 클릭할 경우, api get 요청으로 인한 데이터 받아오기는 잘 되지만, 거의 바로 SelectPage로 넘어가는 현상이 발생하고 있습니다.
제 코드는 다음과 같습니다..

1. Main.jsx
function Main({ reservationWaitList, setReservationWaitList, selectedMachines, setSelectedMachines, handleSelectMachines }) {
  
    return (
        <Box
          style={{
            display: "flex",
            flexDirection: "row", // 토글 버튼과 운동기구 목록을 가로로 배치
            flex: "4"
            // overflowY: "auto",
          }}
          >
            <SideBar setSelectedMachines={setSelectedMachines} handleSelectMachines={handleSelectMachines}/>
            <SelectedMachinesList selectedMachines={selectedMachines} reservationWaitList={reservationWaitList} setReservationWaitList={setReservationWaitList} />
        </Box>
    )
}

export default Main;

1-1. SideBar

function SideBar({ setSelectedMachines, handleSelectMachines }) {
    const ExerciseParts = [
        { part : "0", name : "유산소"},
        { part : "1", name : "하체"},
        { part : "2", name : "어깨"},
        { part : "3", name : "가슴"},
        { part : "4", name : "등"},
    ]
    return (
        <Box
            display="flex"
            flexDirection="column" // 토글 버튼을 세로로 배치
            marginLeft="5vh"
        >
            {
                ExerciseParts.map((x) => (
                    <ToggleButton key={x.part} selectedPart={x.part} name={x.name} setSelectedMachines={setSelectedMachines} handleSelectMachines={handleSelectMachines}/>
                ))
            }
        </Box>
    );
}

export default SideBar;

1-1-1. ToggleButton.jsx

function ToggleButton({ selectedPart, name, setSelectedMachines, handleSelectMachines }) {
   
    return (
      <Button onClick={() => handleSelectMachines(selectedPart)}>
        {name}
      </Button>
    );
}

export default ToggleButton;

1-2. SelectedMachinesList.jsx

// SideBar의 토글 버튼 클릭 시 나오는 해당 부위에 대한 예약 현황 리스트
function SelectedMachinesList({ selectedMachines, reservationWaitList, setReservationWaitList }) {
    const currentTime = new Date();
    const HH = parseInt(format(currentTime, 'HH'), 10);
    const MM = parseInt(format(currentTime, 'mm'), 10);

    const segmentInterval = 10;
    const startIndex = HH * 6 + (MM % segmentInterval === 0 ? MM / segmentInterval + 1 : Math.floor(MM / segmentInterval) + 1);
    const endIndex = startIndex + 18;

    return (
      <div style={{ overflowY: 'auto', height: "50vh", marginLeft: "5vh" }}>
        {selectedMachines.length > 0 && (
          <div style={{ display: "flex", flexDirection: "row-reverse" }}>
            <div style={{ display: "flex", flexDirection: "row", alignItems: "center"}}>
              <div style={{width: "10px", height: "10px", border: "1px solid black", backgroundColor: "skyblue"}}></div>
              <span>예약 완료</span>
            </div>
            <div style={{ display: "flex", flexDirection: "row", alignItems: "center"}}>
              <div style={{width: "10px", height: "10px", border: "1px solid black", backgroundColor: "blue"}}></div>
              <span>내 예약</span>
            </div>
            <div style={{ display: "flex", flexDirection: "row", alignItems: "center"}}>
              <div style={{width: "10px", height: "10px", border: "1px solid black", backgroundColor: "white"}}></div>
              <span>예약 가능</span>
            </div>
          </div>
        )}
        {selectedMachines.length === 0 ? (
          <div style={{ display: "flex", textAlign: "center", margin: "auto", fontSize: "30px"}}>운동 부위를 선택해 주세요.</div>
        ) : (
          selectedMachines.map((machineInfo) => (
            <Box key={machineInfo.machineId} m={2} p={2} border={1}
                style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}
            >
              <div style={{ margin: '5vh'}}>
                < img src={process.env.PUBLIC_URL + `images/machines/${machineInfo.machineTypeName}.jpg`} alt={machineInfo.machineTypeName} style={{ width: "150px", height: "150px"}}/>
                <p>{machineInfo.machineTypeName}</p>
              </div>
              <div style={{ margin: '5vh'}}>
                <ReservationStatus
                    reservationWaitList={reservationWaitList}
                    setReservationWaitList={setReservationWaitList}
                    machineInfo={machineInfo}
                    startIndex={startIndex}
                    endIndex={endIndex}
                />
              </div>
            </Box>
          ))
        )}
      </div>
    );
}

export default SelectedMachinesList;

컴포넌트를 나누는 과정에서 코드가 길어져서 너무 많은 정보를 담은 점 죄송합니다. 
이 문제에 대해 며칠 고민해 봤지만, 프론트 담당이 저 뿐이라 해결이 되고 있지 않습니다....ㅠㅠ
답변 주시면 정말 감사드리겠습니다. 항상 재밌고 유익한 강의 감사합니다!