Am I Doing this Right?

App.js

import React, {useState} from 'react';
import {TextField, Button, Link, Box, Container, Typography, Grid} from '@material-ui/core';
import {login, getAccounts} from './APIHelper'

let loginField = "";
let password = "";

export default function App() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    return (
        <Container maxWidth="sm">
            {isLoggedIn ?
                <Grid
                    container
                    direction="column"
                    justify="center"
                    alignItems="center"
                >
                    <Button variant="contained" color="primary" onClick={() => getAccounts()}>
                        GetAccs
                    </Button>
                    <Button variant="contained" color="primary" onClick={() => setIsLoggedIn(false)}>
                        Logout
                    </Button>
                </Grid>
                :
                <Grid
                    container
                    direction="column"
                    justify="center"
                    alignItems="center"
                >
                    <Typography variant="h4" component="h1" gutterBottom>
                        Login
                    </Typography>
                    <TextField id="login" type="string" label="Login"
                               onChange={event => loginField = event.target.value}/>
                    <TextField id="password" type="password" label="Password"
                               onChange={event => password = event.target.value}/>

                    <Button variant="contained" color="primary"
                            onClick={() => login(loginField, password, setIsLoggedIn)}>
                        Login
                    </Button>
                </Grid>
            }
        </Container>
    );
}