вовчек

Progress bar, они есть почти во всех UI-библиотеках, например:
https://ant.design/components/progress

Я использую так, если пользователя нет в стейте, то проверка не срабатывает, и производится редирект на ту страницу, которую я передал пропсом как redirectTo, а если пользователь есть, то он просто возвращает обычный роут.

const ProtectedRoute = ({isAllowed, redirectTo, ...props}) => {
    return isAllowed ?
        <Route {...props}/> : <Redirect to={redirectTo}/>
};

const App = () => {
    const user = useSelector(state => state.users.user);

    return (
        <Switch>
            <ProtectedRoute
                isAllowed={user}
                redirectTo="/"
                path="/new-artist"
                component={NewArtist}
            />
          
            <Route path="/register" component={Register}/>
            <Route path="/login" component={Login}/>

            <Route component={() => <h2>Not Found.</h2>}/>
        </Switch>
    );
};

Просто сделайте проверку, допустим.

upd из комментария:

const [isActive, updActive] = useState(false);

display = isActive ?  'block' :  'none';

Повесить на select слушателя, и при нажатии вызывать confirm, и проверку, если нажал да, то код выполняется дальше, если нет, то код просто не будет выполнятся.

Не очень понятен заданный вопрос, но если вы имеете в виду то, что при перезагрузке страницы у вас снова клики сбрасываются на ноль, потому что файл js читается заново, а у вас let count = 0? Нужно сделать проверку, если в storage уже есть определенное число кликов, то приравнивать число взятое из storage к count:

let count = 0;
localStorage.getItem('count') ? count = parseInt(localStorage.getItem('count')) : 0; 
// parseInt потому, что в значении storage всегда хранится строка.

<div class="block">
	<h3 class="block__title"></h3>
	<h2 class="block__subtitle"></h2>
</div>

div {
  height: 100px;
  width: 100px;
  background: green;

  display: flex;
}

Или:

div {
  height: 100px;
  width: 100px;
  background: green;

  position: relative;
}

span {
    position: absolute;
    width: 20px;
    height: 20px;
    background: red;
	
	  top: 0;
	  left: 0;
		right: 0;
		bottom: 0;
}

HTML - не язык программирования, а язык разметки. Не запрограммировать, а сверстать.

<div class="block">
		<h3 class="block-title">Math Way</h3>
</div>

.block {
	width: 100%;
	background: red;
  color: #fff;
}

.block-title {
	padding-top: 30px;
	padding-bottom: 10px;
	font-weight: 400;
	font-size: 28px;
}

Переменной popupForm нету.
В самом верху у тебя лишь popupElement.

const popupForm = document.querySelector(".popupForm");

popupForm.addEventListener("submit",  editProfileInfo);

Каждую букву оберни в span, и к каждой букве давай transform: rotate(-?px), вот здесь более подробнее и понятнее: https://css-tricks.com/set-text-on-a-circle/