如何将React页面转换为JSON，以便在转换和保存后能够呈现出包含所有细节的相同页面？

import React from 'react';
import { useState } from 'react';

const Form = () => {

    const [name, setName] = useState('');
    const handleChange = (e) => {
        setName(e.target.value);
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(name);
    }

    return (
        <form>
            <label>Name:</label>
            <input type='text' onChange={handleChange} />
            <br/>
            <button onClick={handleSubmit}>Submit</button>
        </form>
    )
}

export default Form;

例如，我想将上面的React组件转换为JSON