How to use the @hookstate/core.useStateLink function in @hookstate/core

export const ExampleComponent = () => {
    const state = useStateLink(['First Task', 'Second Task'])
        .with(Initial); // enable the plugin
    return <>
         Initial(s).modified())}
        >{(modified: boolean) => {
            return <p>
                Last render at: {(new Date()).toISOString()} <br>
                Is whole current state modified (vs the initial): {modified.toString()} <br>
                The <b>initial</b> state: {JSON.stringify(Initial(state).get())}
            </p>
        }}
        
        {state.nested.map((taskState, taskIndex) =&gt;
            {scopedTaskState =&gt; {
                return <p></p>

function JsonDump(props: { state: StateLink }) {
    // optional scoped state for performance, could use props.state everywhere instead
    const state = useStateLink(props.state);
    return <p>
        Last render at: {(new Date()).toISOString()} <br>
        Current state: {JSON.stringify(state.value)}
    </p>
}

function PerformanceMeter(props: { matrixState: StateLink }) {
    const stats = React.useRef({
        totalSum: 0,
        totalCalls: 0,
        startTime: (new Date()).getTime()
    })
    const elapsedMs = () => (new Date()).getTime() - stats.current.startTime;
    const elapsed = () => Math.floor(elapsedMs() / 1000);
    const rate = Math.floor(stats.current.totalCalls / elapsedMs() * 1000);
    const scopedState = useStateLink(props.matrixState)
        .with(() => ({
            id: PerformanceViewPluginID,
            instanceFactory: () => ({
                onPreset: (path, prevState, newCellValue) => {
                    if (path.length === 2) {
                        // new value can be only number in this example
                        // and path can contain only 2 elements: row and column indexes
                        stats.current.totalSum += newCellValue - prevState[path[0]][path[1]];
                    }
                },
                onSet: () => {
                    stats.current.totalCalls += 1;
                }
            })
        }))
    // mark the value of the whole matrix as 'used' by this component

function TaskEditor(props: { taskState: StateLink }) {
    // optional scoped state for performance, could use props.taskState everywhere instead
    const taskState = useStateLink(props.taskState);
    return <p>
        Last render at: {(new Date()).toISOString()} <br>
        Task state: {JSON.stringify(taskState.get())}<br>
        <input value="{taskState.nested.name.get()}"> taskState.nested.name.set(e.target.value)}
        /&gt;
        <button> taskState.nested.priority.set(p =&gt; (p || 0) + 1)} &gt;
            Increase priority
        </button>
    </p>
}

function TaskEditor(props: { taskState: StateLink }) {
    // optional scoped state for performance, could use props.taskState everywhere instead
    const taskState = useStateLink(props.taskState);
    return <p>
        Last render at: {(new Date()).toISOString()} <br>
        Task state: {JSON.stringify(taskState.get())}<br>
        <input value="{taskState.nested.name.get()}"> taskState.nested.name.set(e.target.value)}
        /&gt;
        <button> taskState.nested.priority.set(p =&gt; (p || 0) + 1)} &gt;
            Increase priority
        </button>
    </p>
}

const TaskView = (props: { state: StateLink }) => {
    const state = useStateLink(props.state);
    return <p>
        Last render at: {(new Date()).toISOString()} <br>
        <span>Task name: {state.value} </span>
        <input value="{state.value}"> state.set(e.target.value)}/&gt;
    </p>
}

function ScopedPrerender(props) {
    var scoped = core.useStateLink(props.state);
    return props.children(scoped);
}

const JsonDump = () => {
    const state = useStateLink(stateRef);
    return <p>
        Last render at: {(new Date()).toISOString()} <br>
        Current state: {JSON.stringify(state.value)}
    </p>
}

export const ExampleComponent = () => {
    const state = useStateLink(stateRef)
    return <>
        
        
        
    
}

function TaskEditor(props: { taskState: StateLink }) {
    const taskState = useStateLink(props.taskState);
    return <p>
        Last render at: {(new Date()).toISOString()} <br>
        Is this task touched: {Touched(taskState).touched().toString()} <br>
        <input value="{taskState.get()}"> taskState.set(e.target.value)}
        /&gt;
    </p>
}