React Bootstrap Form Validation

import React, { useState } from "react";
import { Form, Button, Container, Row, Col } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";
const App = () => {
	const [validated, set_Validated] = useState(false);
	const [form_Data, set_Form_Data] = useState({
		user: "",
		pass: "",
		confimPass: "",
		email: "",
		phoneNo: "",
	});
	const submitFn = (event) => {
		const form = event.currentTarget;
		if (form.checkValidity() === false) {
			event.preventDefault();
			event.stopPropagation();
		}
		set_Validated(true);
	};
	const chngFn = (event) => {
		const { name, value } = event.target;
		set_Form_Data({
			...form_Data,
			[name]: value,
		});
	};
	return (
		<Container className="mt-5">
			<Row>
				<Col
					md={{
						span: 6,
						offset: 3,
					}}
				>
					<h1
						style={{
							color: "green",
						}}
					>
						GeeksforGeeks
					</h1>
					<h3>React Bootstrap Form Validation</h3>
					<Form noValidate validated={validated} onSubmit={submitFn}>
						<Form.Group controlId="username">
							<Form.Label>Username</Form.Label>
							<Form.Control
								type="text"
								name="user"
								value={form_Data.user}
								onChange={chngFn}
								pattern="^[a-zA-Z0-9]+$"
								required
								isInvalid={
									validated &&
									!/^[a-zA-Z0-9]+$/.test(form_Data.user)
								}
							/>
							<Form.Control.Feedback type="invalid">
								Please enter a valid username (alphanumeric
								characters only).
							</Form.Control.Feedback>
						</Form.Group>
						<Form.Group controlId="password">
							<Form.Label>Password</Form.Label>
							<Form.Control
								type="password"
								name="pass"
								value={form_Data.pass}
								onChange={chngFn}
								minLength={6}
								required
								isInvalid={
									validated && form_Data.pass.length < 6
								}
							/>
							<Form.Control.Feedback type="invalid">
								Password must be at least 6 characters long.
							</Form.Control.Feedback>
						</Form.Group>
						<Form.Group controlId="confirmPassword">
							<Form.Label>Confirm Password</Form.Label>
							<Form.Control
								type="password"
								name="confimPass"
								value={form_Data.confimPass}
								onChange={chngFn}
								minLength={6}
								required
								pattern={form_Data.pass}
								isInvalid={
									validated &&
									form_Data.confimPass !== form_Data.pass
								}
							/>
							<Form.Control.Feedback type="invalid">
								Passwords do not match.
							</Form.Control.Feedback>
						</Form.Group>
						<Form.Group controlId="email">
							<Form.Label>Email</Form.Label>
							<Form.Control
								type="email"
								name="email"
								value={form_Data.email}
								onChange={chngFn}
								required
								isInvalid={
									validated &&
									!/^\S+@\S+\.\S+$/.test(form_Data.email)
								}
							/>
							<Form.Control.Feedback type="invalid">
								Please enter a valid email address.
							</Form.Control.Feedback>
						</Form.Group>
						<Form.Group controlId="phoneNumber">
							<Form.Label>Phone Number</Form.Label>
							<Form.Control
								type="number"
								name="phoneNo"
								value={form_Data.phoneNo}
								onChange={chngFn}
								pattern="^\d{10}$"
								required
								isInvalid={
									validated &&
									!/^\d{10}$/.test(form_Data.phoneNo)
								}
							/>
							<Form.Control.Feedback type="invalid">
								Please enter a valid 10-digit phone number.
							</Form.Control.Feedback>
						</Form.Group>
						<Button type="submit">Submit</Button>
					</Form>
				</Col>
			</Row>
		</Container>
	);
};
export default App;