Pass theme ID creates or updates an asset for a theme

[PeterFaster]

Hi guys.

I'm building a Shopify app using Remix

How can I pass "theme_id" to "action/loader" route to add "About section" to the selected theme as instructed in the documentation here when clicking the "Add section to your theme" button?

I tried adding "Form" to use "action" route but it doesn't work in "TitleBar" of "Modal"

Can I pass "theme_id" to some handler function without using "Form"?

Does anyone have any suggestions or solutions that can assist me?

Thank you guys.

My image here:
https://imgur.com/TVa9Z1e

My code here:

import React, { useState, useCallback } from 'react';
import { json } from '@remix-run/node';
import { authenticate } from '../shopify.server';
import { useLoaderData, useActionData } from '@remix-run/react';
import { Modal, TitleBar, useAppBridge } from '@shopify/app-bridge-react';
import { Page, BlockStack, Box, ChoiceList } from '@shopify/polaris';

// Loader.
export const loader = async ( { request, params } ) => {
	const { admin, session } = await authenticate.admin( request );

	const asset = new admin.rest.resources.Asset({ session: session });

	asset.theme_id = 828155753; // Pass dynamic theme id here.
	asset.key      = "sections/index.liquid";
	asset.value    = "<img src='backsoon-postit.png'><p>We are busy updating the store for you and will be back within the hour.</p>";

	const dataLoader = await asset.save({ update: true });

	return json( { dataLoader } );
}

// Action.
export const action = async ( { request, params } ) => {
	const { admin, session } = await authenticate.admin( request );

	const asset = new admin.rest.resources.Asset({ session: session });

	asset.theme_id = 828155753; // Pass dynamic theme id here.
	asset.key      = "sections/index.liquid";
	asset.value    = "<img src='backsoon-postit.png'><p>We are busy updating the store for you and will be back within the hour.</p>";

	const actionData = await asset.save({ update: true });

	return json( { actionData } );
}

// App.
const App = () => {
	const shopify        = useAppBridge();
	const { dataLoader } = useLoaderData();
	const { actionData } = useActionData();
	const showModal      = () => {
		shopify.modal.show( 'my-modal' );
	}

	const [ selected, setSelected ] = useState( [] );
	const handleChange              = useCallback( value => setSelected( value ), [] );

	const handleClick = () => {
		console.log( selected );
	}

	return (
		<Page
			backAction={{ content: 'Sections', url: '#' }}
			title="About section"
			primaryAction={{ content: 'Add section to your theme', onAction: () => showModal() }} >

			<Modal id="my-modal">
				<TitleBar title="About section">
					<button>Cancel</button>
					<button onClick={ handleClick } variant="primary">Add section to your theme</button>
				</TitleBar>

				<Box padding="400">
					<BlockStack gap="300">
						<ChoiceList title="Themes:" choices={} selected={ selected } onChange={ handleChange } />
					</BlockStack>
				</Box>
			</Modal>
		</Page>
	);
};

export default App;