Hello $-$ Please review the below code. I don't think that the state is being persisted. Picture also not working. $($:

Requirements are:

Complete the post, put and delete requests using mongo to make the changes to the data persistent.

Pictures should work for the whole session.

import React, $\{$ useState $\}$ from 'react';

const DataForm $=(\{$ addNewItem, updateItem, deleteItem $\})=>\{$

const $[$name$,$ setName$]=$ useState$(\text{'}\text{'})$;

const $[$brand$,$ setBrand$]=$ useState$(\text{'}\text{'})$;

const $[$price$,$ setPrice$]=$ useState$(\text{'}\text{'})$;

const $[$image$,$ setImage$]=$ useState$($null$)$;

const $[$error$,$ setError$]=$ useState$($null$)$;

const $[$success$,$ setSuccess$]=$ useState$($false$)$;

const handleImageChange $=($e$)=>\{$

const file $=$ e$.$target.files$[0]$;

if $($file$)\{$

setImage$($file$)$;

$\}$

$\}$;

const handleSubmit $=$ async $($e$)=>\{$

e$.$preventDefault$()$;

if $(!$name $||!$brand $||!$price $||!$image$)\{$

setError$(\text{'}$All fields, including an image, are required'$)$;

setSuccess$($false$)$;

return;

$\}$

const priceNumber $=$ parseFloat$($price$)$;

if $($isNaN$($priceNumber$))\{$

setError$(\text{'}$Price must be a valid number'$)$;

setSuccess$($false$)$;

return;

$\}$

const formData $=$ new FormData$()$;

formData.append$(\text{'}$name$\text{'},$ name$)$;

formData.append$(\text{'}$brand$\text{'},$ brand$)$;

formData.append$(\text{'}$price$\text{'},$ priceNumber$)$;

formData.append$(\text{'}$gear$\text{'},$ image$)$;

setError$($null$)$;

try $\{$

const response $=$ await fetch$(\text{'}$My URL', $\{$

method: 'POST',

body: formData,

$\})$;

if $(!$response.ok$)\{$

throw new Error$(\text{'}$Server error'$)$;

$\}$

const data $=$ await response.json$()$;

if $($data$.$success$)\{$

setSuccess$($true$)$;

addNewItem$($data$.$newItem$)$;

$//$ Reset form

setName$(\text{'}\text{'})$;

setBrand$(\text{'}\text{'})$;

setPrice$(\text{'}\text{'})$;

setImage$($null$)$;

$\}$ else $\{$

setError$($data$.$message $||$ 'Failed to add the item'$)$;

setSuccess$($false$)$;

$\}$

$\}$ catch $($err$)\{$

setError$(\text{'}$An error occurred while submitting the form'$)$;

setSuccess$($false$)$;

$\}$

$\}$;

const handleUpdate $=$ async $($itemId$,$ updatedData$)=>\{$

try $\{$

const response $=$ await fetch$(`$My URL$/$$$\{$itemId$\}`,\{$

method: 'PUT',

headers: $\{$

'Content$-$Type': 'application$/$json$\text{'},$

$\},$

body: JSON.stringify$($updatedData$),$

$\})$;

const data $=$ await response.json$()$;

if $($data$.$success$)\{$

updateItem$($data$.$updatedItem$)$;

setSuccess$($true$)$;

$\}$ else $\{$

setError$($data$.$message $||$ 'Failed to update the item'$)$;

setSuccess$($false$)$;

$\}$

$\}$ catch $($err$)\{$

setError$(\text{'}$An error occurred while updating the item'$)$;

setSuccess$($false$)$;

$\}$

$\}$;

const handleDelete $=$ async $($itemId$)=>\{$

try $\{$

const response $=$ await fetch$(`$My URL$/$$$\{$itemId$\}`,\{$

method: 'DELETE',

$\})$;

const data $=$ await response.json$()$;

if $($data$.$success$)\{$

deleteItem$($itemId$)$;

setSuccess$($true$)$;

$\}$ else $\{$

setError$($data$.$message $||$ 'Failed to delete the item'$)$;

setSuccess$($false$)$;

$\}$

$\}$ catch $($err$)\{$

setError$(\text{'}$An error occurred while deleting the item'$)$;

setSuccess$($false$)$;

$\}$

$\}$;

return $($