Laravel React js Newsletter email insert from frontend

//here is api route

Route::post('/subscribe', [NewsletterController::class, 'subscribe']);

//here is controller code,

  public function subscribe(Request $request)

    {

        $request->validate([

            'email' => 'required|email|unique:news_letters,email',

        ]);

        NewsLetter::create(['email' => $request->email]);

        return response()->json(['message' => 'Subscription successful!']);

    }

//here is react js component code, need to use this code before starting

return.

  const [email, setEmail] = useState('');

  const [message, setMessage] = useState('');

  const axiosInstance = useBaseUrl();

  const handleSubscribe = async () => {

      try {

          const response = await axiosInstance.post('/api/subscribe', { email });

          setMessage(response.data.message);

      } catch (error) {

          if (error.response && error.response.data) {

              setMessage(error.response.data.message || 'An error occurred');

          } else {

              setMessage('An error occurred');

          }

      }

  };

//here Newsletter input box code,

   <div className="subscribeBottom">

            <div className="d-flex max-width-400 custom-center custom-align-center custom-m-auto cb-5 gap-2 custom-large-btn">

                <input

                    type="text"

                    className="form-control w-75 subsEmail"

                    placeholder="Enter your email"

                    value={email}

                    onChange={(e) => setEmail(e.target.value)}

                />

                <button

                    className="btn custom-qutation subscribe-btn custom-subscribe-btn w-25"

                    onClick={handleSubscribe}

                >

                    Subscribe

                </button>

            </div>

            <div className="custom-center custom-m-auto cb-5 gap-2 custom-mobile-btn">

                <input

                    type="text"

                    className="form-control w-100 subsEmail mb-2"

                    placeholder="Enter your email"

                    value={email}

                    onChange={(e) => setEmail(e.target.value)}

                />

                <button

                    className="btn custom-qutation w-100"

                    onClick={handleSubscribe}

                >

                    Subscribe

                </button>

            </div>

            {message && <p className="text-start mt-2 text-common-color">{message}</p>}

            <p className="text-start mt-2 text-common-color">

                We care about your data in our{" "}

                <span className="text-decoration-underline">

                    privacy policy

                </span>

            </p>

        </div>