Hello. Would just like the two pieces of code to work together. Have tried just about everything but still does do it$.$ Please, please help. Thank you much.

React component $-$ DataForm

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$)=>\{$

setImage$($e$.$target.files$[0])$;

$\}$;

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

e$.$preventDefault$()$;

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

setError$(\text{'}$All fields are required, including an image.$\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{'},$ price$)$;

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

try $\{$

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

method: 'POST',

body: formData,

$\})$;

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

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

setSuccess$($true$)$;

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

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

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

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

setImage$($null$)$;

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

$\}$

$\}$;

return $($