I need to match this exactly for my react forms assignment and im not sure what to do$.$ Heres my code: import React, $\{$ useState $\}$ from "react";

export const ShoppingListInput $=()=>\{$

const $[$itemName$,$ setItemName$]=$ useState$("")$;

const $[$quantity$,$ setQuantity$]=$ useState$("")$;

const $[$itemNameError$,$ setItemNameError$]=$ useState$("")$;

const $[$quantityError$,$ setQuantityError$]=$ useState$("")$;

const addItem $=()=>\{$

let hasError $=$ false;

$//$ Validate item name

if $(!$itemName$)\{$

setItemNameError$("$Please provide an item name."$)$;

hasError $=$ true;

$\}$ else $\{$

setItemNameError$("")$;

$\}$

$//$ Validate quantity

if $(!$quantity$)\{$

setQuantityError$("$Please provide a quantity."$)$;

hasError $=$ true;

$\}$ else $\{$

setQuantityError$("")$;

$\}$

if $($hasError$)\{$

$//$ If there are errors, don't proceed to add item

return;

$\}$

$//$ Your logic to add item here

console.log$("$Adding item:", itemName, "with quantity:", quantity$)$;

$//$ Clear input fields

setItemName$("")$;

setQuantity$("")$;

$\}$;

return $($