Controlled and Uncontrolled Form in React

import React, { useState } from 'react';
import { Form, Button } from 'react-bootstrap';

export default function controlledForm() {
	const [username, setUsername] = useState("");
	const [password, setPassword] = useState("");

	const handleClick = (e) => {
		e.preventDefault();
		fetch("https://yoururl.com/api/login", {
			method: "POST",
			headers: {
				"Content-Type": "application/json"
			},
			credentials: "include",
			body: JSON.stringify({
				"username": username,
				"password": password
			})
		}).then(res => {
			if (res.status === 200) {
				alert("Successfully logged in!")
			}
			return res.json()
		})
	}

	return <>
	<Form>
		<Form.Label html="username">Username</Form.Label>
		<Form.Control value={username} onChange={e => setUsername(e.target.value)} />
		<br />
		<Form.Label html="password">Password</Form.Label>
		<Form.Control value={password} onChange={e => setPassword(e.target.value)} />
		<br />
		<Button onClick={handleClick}>Submit!</Button>
	</Form>
	</>
}

import React, { useRef } from 'react';
import { Form, Button } from 'react-bootstrap';

export default function controlledForm() {
	const usernameRef = useRef("")
	const passwordRef = useRef("");

	const handleClick = (e) => {
		e.preventDefault();
		fetch("https://yoururl.com/api/login", {
			method: "POST",
			headers: {
				"Content-Type": "application/json"
			},
			credentials: "include",
			body: JSON.stringify({
				"username": usernameRef.current.value,
				"password": passwordRef.current.value
			})
		}).then(res => {
			if (res.status === 200) {
				alert("Successfully logged in!")
			}
			return res.json()
		})
	}

	return <>
	<Form>
		<Form.Label html="username">Username</Form.Label>
		<Form.Control ref={usernameRef} />
		<br />
		<Form.Label html="password">Password</Form.Label>
		<Form.Control ref={passwordRef} />
		<br />
		<Button onClick={handleClick}>Submit!</Button>
	</Form>
	</>
}