React: Controlled Form with Submit

import React, { useState } from 'react';
import './styles.css';
 
export function FeedbackForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [subscribe, setSubscribe] = useState(false);
  const [submitted, setSubmitted] = useState(null);
 
  function handleSubmit(e) {
    e.preventDefault();
    const canSubmit = name.trim() && email.trim();
    if (!canSubmit) return;
    setSubmitted({ name, email, message, subscribe });
    setName('');
    setEmail('');
    setMessage('');
    setSubscribe(false);
  }
 
  const canSubmit = name.trim() && email.trim();
 
  return (
    <article className="card" data-testid="form-card">
      <header>
        <h2 className="title">LeadCapture: feedback form</h2>
        <p className="subtitle">Controlled inputs + checkbox, submit action</p>
      </header>
 
      <form className="row" onSubmit={handleSubmit} aria-label="form">
        <input
          className="input"
          type="text"
          placeholder="Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
          aria-label="name"
        />
        <input
          className="input"
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          aria-label="email"
        />
        <textarea
          className="textarea"
          placeholder="Message"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          aria-label="message"
          rows={3}
        />
        <label className="checkbox-row">
          <input
            className="checkbox"
            type="checkbox"
            checked={subscribe}
            onChange={(e) => setSubscribe(e.target.checked)}
            aria-label="subscribe"
          />
          <span>Subscribe to newsletter</span>
        </label>
        <div className="actions">
          <button className="button" type="submit" disabled={!canSubmit}>Submit</button>
        </div>
      </form>
 
      {submitted && (
        <section className="result" aria-label="result">
          <p><strong>Submitted:</strong></p>
          <p>Name: {submitted.name}</p>
          <p>Email: {submitted.email}</p>
          <p>Message: {submitted.message}</p>
          <p>Subscribed: {submitted.subscribe ? 'Yes' : 'No'}</p>
        </section>
      )}
    </article>
  );
}
 
export default function App() {
  return (
    <main className="challenge-container">
      <section>
        <FeedbackForm />
      </section>
    </main>
  );
}