React checkauth react

[Klentovskiy]

Сделал авторизацию пользователя на сайте, и сделал проверку на авторизированного пользователя

выглядит она так

Отдельный файл для приват роута, где я делаю проверку запросом на бекэнд на то авторизирован ли пользователь или нет, когда я просто меняю auth на true меня пускает на сайт, когда на false не пускает, когда я добавил axios запрос оно начало багаться, то пускает то не пускает, в общем я так понял что оно это не асинхронно делает, и пускает меня только тогда когда axios запрос выполняется быстрее, как всё сделать это асинхронно?

import React, { useEffect } from "react";
import { Navigate, Outlet } from "react-router-dom";
import axios from "../axios/axios.js";

const PrivateRoute = () => {
    let auth = false

    axios.get('/api/checkauth', ).then((res) => {
        if (res.data.valid) {
            auth = true
        }
    })

    return (
        auth ? <Outlet /> : <Navigate to="/login" />
    )
};

export default PrivateRoute;

UPD: Решил