Registration Form - Copy this React, Tailwind Component to your project

#-Registration-Form-Assignment-This-project-provides-a-basic-registration-form-using-React.-The-form-includes-fields-for-`First-Name`,-`Last-Name`,-`Email`,-and-`Phone-Number`.-Your-task-is-to-complete-the-functionality-by-implementing-state-management-and-form-validation.-##-Tasks-Overview-###-Task-1:-Define-State-Variables---**Objective**:-Use-React's-`useState`-hook-to-store-the-values-for-each-input-field-(`firstName`,-`lastName`,-`email`,-and-`phoneNumber`),-as-well-as-a-state-to-track-form-submission.---**Instructions**:-Inside-the-`App`-function,-define-`useState`-variables-for-each-form-field.-The-state-should-also-include-a-submission-state-to-manage-form-validation.-###-Task-2:-Add-`value`-and-`onChange`-Handlers---**Objective**:-Ensure-that-each-input-field-correctly-handles-its-state-by-using-`value`-and-`onChange`-properties.---**Instructions**:---Add-the-`value`-property-to-each-input-to-bind-it-to-the-respective-state.---Use-the-`onChange`-event-to-update-the-state-when-the-user-types-into-the-input-fields.-###-Task-3:-Add-Form-Submit-Handler---**Objective**:-Implement-a-form-submission-handler-that-validates-whether-all-fields-are-filled-and-prevents-the-default-form-behavior.---**Instructions**:---Add-an-`onSubmit`-handler-to-the-form.---Use-`e.preventDefault()`-to-prevent-the-default-behavior.---Validate-that-all-fields-are-filled-before-proceeding-with-form-submission.-###-Task-4:-Display-Validation-and-Success-Messages---**Objective**:-Show-error-messages-for-any-empty-fields-and-a-success-message-when-the-form-is-successfully-submitted.---**Instructions**:---Conditionally-display-error-messages-for-empty-fields.---Display-a-success-message-when-all-fields-are-correctly-filled-and-the-form-is-submitted.-import-React,-{-useState-}-from-'react';-import-'./App.css';-export-default-function-App()-{-//-Task-1:-Define-state-variables-using-useState-to-store-form-data-and-submission-state.-return-(-<div-className="form-container">-<form-className="register-form"-//-Task-3:-Add-a-submit-handler-that-prevents-default-form-behavior-and-checks-if-all-fields-are-filled.->-{/*-Task-2:-Add-the-"value"-and-"onChange"-functionality-for-each-field-*/}-{/*-First-Name-Input-*/}-<input-id="first-name"-className="form-field"-type="text"-placeholder="First-Name"-name="firstName"-//-Add-value-and-onChange-functionality-here-/>-{submitted-&&-!field.firstName-&&-(-<span>Please-enter-your-first-name</span>-)}-{/*-Last-Name-Input-*/}-<input-id="last-name"-className="form-field"-type="text"-placeholder="Last-Name"-name="lastName"-//-Add-value-and-onChange-functionality-here-/>-{submitted-&&-!field.lastName-&&-(-<span>Please-enter-your-last-name</span>-)}-{/*-Email-Input-*/}-<input-id="email"-className="form-field"-type="text"-placeholder="Email"-name="email"-//-Add-value-and-onChange-functionality-here-/>-{submitted-&&-!field.email-&&-<span>Please-enter-your-email</span>}-{/*-Phone-Number-Input-*/}-<input-id="phone-number"-className="form-field"-type="text"-placeholder="Phone-Number"-name="phoneNumber"-//-Add-value-and-onChange-functionality-here-/>-{submitted-&&-!field.phoneNumber-&&-(-<span>Please-enter-your-phone-number</span>-)}-{/*-Submit-Button-*/}-<button-className="form-field"-type="submit">-Register-</button>-{/*-Task-4:-Add-success-message-when-the-form-is-correctly-submitted-*/}-</form>-</div>-);-}