How get Form values where the form elements are stored in a variable or in props?

Question

I created a variable called body from a template object to have Inputs embedded in Form.item. When I try to get the value of all the inputs I find it an empty object. When using Form.item with simple Inputs we can have the object

value of template is:

<p><strong>Commercial start of +++SERVICE+++</strong> <strong>roaming service</strong></p><p><strong>between,</strong></p><p><strong>+++OPERATOR_A+++, +++COUNTRY_A+++ (+++TADIG_A+++)</strong></p><p>&amp;</p><p><strong>+++OPERATOR_B+++, +++COUNTRY_B+++ (+++TADIG_B+++)</strong></p><p>This is to confirm that on <strong>+++LAUNCH_DATE+++</strong></p><p>Agree to launch +++SERVICE+++ service on a bilateral basis. The launch follows the successful completion of the applicable IREG and TADIG tests.</p><table><tr><td><p><strong>For +++OPERATOR_A+++</strong></p><p><strong>Date: +++SIGNATURE_DATE+++</strong></p><p><strong>+++RESPONSIBLE_A_NAME+++</strong></p><p><strong>Title: +++RESPONSIBLE_A_DESIGNATION+++</strong></p><p><strong>+++IMAGE signature()+++</strong></p></td><td><p><strong>For +++OPERATOR_B+++</strong></p><p><strong>           Date: </strong></p><p><strong>+++RESPONSIBLE_B_NAME+++</strong></p><p><strong>Title: +++RESPONSIBLE_B_DESIGNATION+++</strong></p></td></tr></table>

import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import {message, Form, Button , Input} from 'antd';
import React, { useState } from 'react';
import './HtmlContract.css';
import parse from 'html-react-parser';
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
}


function HtmlContract(props) {
    const [html, setHtml] = useState(props.templateContract.value);
    const replaceInputsAndImages = () => {
        if (html.includes('+++')) {
            let mySubString = html.substring(
                html.indexOf("+++") + 3,
                html.indexOf("+++", html.indexOf("+++") + 3)
            );
            setHtml(html.replaceAll("+++" + mySubString + "+++",`<Form.Item label='${mySubString}' name='${mySubString}'><Input placeholder='${mySubString}' /></Form.Item> `));
    }};
    const [loading, setLoading] = useState(false);
    const [form] = Form.useForm()
    React.useEffect(() => {
        replaceInputsAndImages();
    });

    const onFinish = async (values) => {
        console.log(values)
        
    }
    const body = parse(html);

    return (<>

                <Form
                    onFinish={onFinish}
                    onFinishFailed={(errorInfo) => console.log(errorInfo)}
                    form={form}
                    {...layout}
                    name='contract-form'>
                        {body}
                        <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                            <Button type='primary' htmlType='submit' style={{ float: 'right' }}>
                                Save
                            </Button>
                        </Form.Item>
                </Form>
        </>
    );
}

export default HtmlContract;