Here is the DataForm code

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

const DataForm $=(\{$ items, 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 $[$editingItemId$,$ setEditingItemId$]=$ useState$($null$)$;

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

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

if $($file$)\{$

setImage$($file$)$; $//$ Save the selected file in state

$\}$

$\}$;

const handleEdit $=($item$)=>\{$

setEditingItemId$($item$.$id$)$;

setName$($item$.$name$)$;

setBrand$($item$.$brand$)$;

setPrice$($item$.$price$)$;

setImage$($null$)$;

setError$($null$)$;

setSuccess$($false$)$;

$\}$;

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

e$.$preventDefault$()$;

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

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

setSuccess$($false$)$;

return;

$\}$

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

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

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

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$)$;

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

setError$($null$)$;

try $\{$

if $($editingItemId$)\{$

$//$ Update existing item

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

method: 'PUT',

body: formData,

$\})$;

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

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

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

setSuccess$($true$)$;

resetForm$()$;

$\}$ else $\{$

setError$($data$.$message $||$ 'Failed to update the item.$\text{'})$;

setSuccess$($false$)$;

$\}$

$\}$ else $\{$

$//$ Add new item

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

method: 'POST',

body: formData,

$\})$;

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

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

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

setSuccess$($true$)$;

resetForm$()$;

$\}$ else $\{$

setError$($data$.$message $||$ 'Failed to add the item.$\text{'})$;

setSuccess$($false$)$;

$\}$

$\}$

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

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

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.$\text{'})$;

setSuccess$($false$)$;

$\}$

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

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

setSuccess$($false$)$;

$\}$

$\}$;

const resetForm $=()=>\{$

setEditingItemId$($null$)$;

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

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

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

setImage$($null$)$;

document.getElementById$(\text{'}$fileInput$\text{'}).$value $=\text{'}\text{'}$;

$\}$;

return $($