How do I use Solid.js with clear data model <-> UI primitive distinction?

const initialFiles = new Map([
    ["a.txt", "foo"],
    ["b.txt", "bar"],
    ["c.txt", "baz"],
])

function App() {
  const [files, setFiles] = createSignal(initialFiles);
  
  const handleFileChange = (fileName: string, value: string) => {
    const newFiles = new Map(files());
    newFiles.set(fileName, value);
    setFiles(newFiles);
  };

  return (
    <div>
      <FileEditor
        value={files().get("a.txt") ?? ""}
        onChange={(value) => handleFileChange("a.txt", value)}
      />

      <FileEditor
        value={files().get("b.txt") ?? ""}
        onChange={(value) => handleFileChange("b.txt", value)}
      />

      <FileEditor
        value={files().get("b.txt") ?? ""}
        onChange={(value) => handleFileChange("a.txt", value)}
      />
    </div>
  );
}