Getting the new error message now. Please help. Thank you.

What changes would be needed to compile and render successfully?

gear:$1$Access to fetch at $\text{'}$My URL' from origin 'localhost:$3000\text{'}$has been blocked by CORS policy: No 'Access$-$Control$-$Allow$-$Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to $\text{'}$no$-$cors' to fetch the resource with CORS disabled.

My URL$/$api$/$gear:$1$

$$

$$Failed to load resource: net::ERR$\_$FAILED

My URL$/$api$/$gear:$1$

$$

$$Failed to load resource: the server responded with a status of $404()$

Here is the DataForm code:

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$/$api$/$gear$\text{'},\{$

$$ 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 $||\text{'}$Failed to add the item.$\text{'})$;

$$ setSuccess$($false$)$;

$\}$

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

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

$$ setSuccess$($false$)$;

$\}$

$\}$;

$$ return $($

$$

$$

$$ Name

$$ setName$($e$.$target.value$)\}/>$

$$

$$

$$ Brand

$$ setBrand$($e$.$target.value$)\}/>$

$$

$$

$$ Price

$$ setPrice$($e$.$target.value$)\}/>$

$$

$$

$$ Image

$$

$$

$\{$error && $\{$error$\}\}$

$\{$success && Item added successfully!$\}$

$$ Submit

$$

$)$;

$\}$;

export default DataForm;