```jsx import React from "react"; export default function App() { const [userName, setUserName] = React.useState(""); const [badgeId, setBadgeId] = React.useState(""); const [phoneNo, setPhoneNo] = React.useState(""); const [searchArea, setSearchArea] = React.useState(""); const [liveTracking, setLiveTracking] = React.useState(false); const [ambulanceDetails, setAmbulanceDetails] = React.useState(""); const [emergencyWaitingTime, setEmergencyWaitingTime] = React.useState(""); const [destination, setDestination] = React.useState(""); const [contactDriver, setContactDriver] = React.useState(false); const [vehiclesInRange, setVehiclesInRange] = React.useState(false); const [searchVehicle, setSearchVehicle] = React.useState(""); const handleUserNameChange = (e: React.ChangeEvent) => { setUserName(e.target.value); }; const handleBadgeIdChange = (e: React.ChangeEvent) => { setBadgeId(e.target.value); }; const handlePhoneNoChange = (e: React.ChangeEvent) => { setPhoneNo(e.target.value); }; const handleSearchAreaChange = (e: React.ChangeEvent) => { setSearchArea(e.target.value); }; const handleLiveTrackingChange = () => { setLiveTracking((prevState) => !prevState); }; const handleAmbulanceDetailsChange = (e: React.ChangeEvent) => { setAmbulanceDetails(e.target.value); }; const handleEmergencyWaitingTimeChange = (e: React.ChangeEvent) => { setEmergencyWaitingTime(e.target.value); }; const handleDestinationChange = (e: React.ChangeEvent) => { setDestination(e.target.value); }; const handleContactDriverChange = () => { setContactDriver((prevState) => !prevState); }; const handleVehiclesInRangeChange = () => { setVehiclesInRange((prevState) => !prevState); }; const handleSearchVehicleChange = (e: React.ChangeEvent) => { setSearchVehicle(e.target.value); }; return (

{/* User Information */}

Name of the user:

Badge ID:

Phone no:

{/* Area Search */}

Area search area:

{/* Live Tracking */}

Live tracking:

{/* Ambulance Details */}

Ambulance details:

{/* Emergency Waiting Time */}

Emergency waiting time:

{/* Destination */}

Destination:

{/* Contact Driver */}

Contact driver:

{/* Vehicles in Range */}

No vehicles in range:

{/* Search Vehicle */}

Search Vehicle:

); } ```