reactとviteでmpaの環境を構築したい

【概要】
現在案件でバックエンド環境にリアクトを組み込みたいと思ってます。
今回依頼したいのはSPAではなくMPAでフロント側でbuildしたものを
バックエンド環境にbuildしてマウントして実行できるようにすることです。
各ページにつきエントリーポイントを作成する想定です。

ゴールは下記のディレクトリ構造になることです。
root/
　├ front-end（reactとviteを使用してbuild実行）
　├ backend/src
├ Top
├ index.twig（ここでマウントする）
├ js/index.4239fs.js（フロントでbuildしたもの）
├ About
├ index.twig（ここでマウントする）
├ js/index.422339fs.js（フロントでbuildしたもの）
　├ assets/styles/index.3526.css（フロントでbuildしたもの）

【現状詰まっていること】
フロント環境は大方構築すみですが、詰まっていることが２点あります。

１つは1ページごとにbuild先を指定できていないこと。
トップページのbuild先はsrc/Top
アバウトページのbuild先ははsrc/About
cssのbuild先はassets/styles
のような形にしたい

もう1点は front-end環境の外にbuildした場合、バックエンド側でマウントしてもreactが動かないということです。ちなみにfront-end環境内にbuildしてバックエンド側からfront-end環境下のbuildされたものを読みに行った場合ちゃんと動きます。buildしたもののみで動くようにしたいです。

下記はDEMO環境です。
https://github.com/nomin-sasabuchi/react-MPA/tree/main/front-end


【依頼内容】
この2つの詰まっている点を解決できるまでサポートしてほしい