[Bug] Usuário no header não está aparecendo

Olá tudo bem? Estou com um problema quando digito meu nome no input, não está aparecendo no Header assim como no vídeo

código APP:

import { useState } from "react"

import ArticleList from "./components/ArticleList/ArticleList"
import Header from "./components/header/Header"
import Form from "./components/Form/Form";

const App = () => {
  const [user, setUser] = useState ()
  const hasUser = Boolean(user)
  return (
      <>
          <Header user={user} />
          {hasUser && <ArticleList />}
          {hasUser || <Form on Submit={setUser} />}
      </>
  )
}

export default App

código form:

const Form = ({ onSubmit }) => {
    const safeSubmit = event => {
        event.preventDefault()
        event.stopPropagation()
        const name = event.target[0].value
        const email = event.target[1].value
        onSubmit({ name, email })
    }

    return <form onSubmit={safeSubmit}>
        <input type="text" placeholder="Insira seu nome..." />
        <input type="email" placeholder="Insira seu e-mail..." />
        <button type="submit">Seguir</button>
    </form>
}

export default Form

e código do header:

import ToggleTheme from "../ToggleTheme/ToggleTheme";

const Header = ({ user }) => {
    return (
        <div className="flex h-20 bg-alura-200 justify-between items-center px-5 sm:rounded-xl sm:m-5">
            <span className="text-gray-100"> Olá, {user?.name || "Usuário" } </span>

            <h1 className="text-gray-100 text-xl">Alura Newsletter</h1>
            <ToggleTheme/>

        </div>
    )
}

export default Header;

Agradeço desde já a quem puder me auxiliar =)