@rollup/plugin-html how to output the index.html file in the same directory as main.js

I have the following rollup config:

import { defineConfig } from "rollup";
import multiInput from "rollup-plugin-multi-input";
import typescript from "rollup-plugin-typescript2";
import html from "@rollup/plugin-html";

export default defineConfig([
    {
        input: ["ui/**/main.tsx"],
        output: { dir: "out" },
        plugins: [multiInput(), typescript({ resolveJsonModule: true, tsconfig: "./tsconfig.react.json" }), html()]
    }
]);

I'm using a plugin that creates a index.html file depending on what assets were bundled. I am also using rollup-plugin-multi-input which lets me have multiple entry points.

This configuration creates the following directory structure:

And this is the structure I want

How can I active this in my rollup configuration?