Использование результатов выборки для возврата элемента в компонент - React

У меня есть веб-приложение, построенное на python/django, и я пытаюсь использовать React для front-end. Приложение имеет шаблон с пустым div (#profile), который заполняется с помощью React.

В шаблоне есть атрибут, который используется для получения данных из бэкенда. Данные передаются в качестве реквизита в главную функцию/компонент (Profile) для инстанцирования состояния.

let username = document.getElementById('profile').getAttribute('data-profile');


fetch(`/getFollow/${username}`)
.then(response => response.json())
.then(results => {
    ReactDOM.render(<Profile profile={username} followers={results.follower_count} following={results.following_count}/>, document.querySelector("#profile"));
}) 

Компонент Profile возвращает элементы html и содержит еще одну функцию/компонент (FollowButton)

function Profile(props) {

    const [state, setState] = React.useState({
        follower_count: props.followers,
        following_count: props.following,
        profile: props.profile
    });

    return (
        <div>            
            <br></br>
            <div class="row justify-content-center">
                <h2 id="profile">{state.profile}</h2>
                <span>
                <FollowButton profile={state.profile}/>
                </span>
            </div>
            <div class="row justify-content-center">
                followers: {state.follower_count} | following: {state.following_count}
            </div>
            <br></br>
        </div>
    );
}

Кнопка FollowButton использовала переданный реквизит, чтобы сделать еще один выборку и на основе результатов динамически вернуть элемент кнопки.

function FollowButton(props){
    fetch(`/getFollow/${props.profile}`)
    .then(response => response.json())
    .then(results => {       
        if (results.isFollowing == "True"){
            //Return Following button
            //console.log('following');
            <button class="badge badge-pill ml-2 btn-primary">Following</button>
        }
        else if (results.isFollowing == "False"){
            //Return Follow button
            //console.log('follow');
            <button class="badge badge-pill ml-2 btn-secondary">Follow</button>
        }
        else if (results.isFollowing == "Self"){
            //No button 
            //console.log('user's own page');
            return <button></button>
        }                
    });
}

У меня пара ошибок -

1. Minified React error #152
2. Uncaught (in promise) Error: Minified React error #152

Я знаю, что проблема в том, что FollowButton не возвращает ни одно из утверждений внутри fetch/then. Если я помещаю оператор возврата за ее пределами, она возвращается нормально, но мне нужны данные внутри. Я полагаю, это происходит потому, что я пытаюсь сделать что-то синхронное, которое является асинхронным?

Я слишком новичок в React, чтобы знать лучший способ решения этой проблемы. Я видел несколько похожих вопросов, но в большинстве из них используется функция componentDidMount(), которая, как мне кажется, больше не нужна в текущей версии React.

Вернуться на верх