confused on rendering issue

const [selectedFile, setSelectedFile] = createSignal<File | null>(null)

    return (
      <div>
        <input type="file" onChange={handleFileChange} />
        {selectedFile() && <p class="text-red-500">File selected: {selectedFile()!.name}</p>}
      </div>
    )

const [selectedFile, setSelectedFile] = createSignal<File | null>(null)

    return (
      <div>
        <input type="file" onChange={handleFileChange} />
        {selectedFile() && <p class="text-red-500">File selected: {selectedFile()!.name}</p>}
      </div>
    )