WordPress Custom Widget Save Multiple Attributes?

I am using the @wordpress/create-block package to build a simple widget. I do not understand how to make the save.js save more than one attribute.

I have 2 attributes defined in the block.json:?theNotes?and?theContact.

"attributes": {
    "theNotes": {
        "type": "string",
        "source": "text",
        "selector": "div",
        "default": ""
    },
    "theContact": {
        "type": "string",
        "source": "text",
        "selector": "div",
        "default": ""
    }
}

My edit.js looks like this:

export default function Edit( { attributes, setAttributes } ) {
return (
    <div { ...useBlockProps() }>
            <div>
                <TextControl
                    label={ __( 'The Notes', 'editor-notes' ) }
                    value={ attributes.theNotes }
                    onChange={ ( val ) => setAttributes( { theNotes: val } ) }
                />
            </div>
            <div>
                <TextControl
                    label={ __( 'The Contact', 'editor-notes' ) }
                    value={ attributes.theContact }
                    onChange={ ( val ) => setAttributes( { theContact: val } ) }
                />
            </div>
    </div>
);
}

For the save.js file, I cannot find instructions on how to save both of those attributes using this default scaffolding. I thought something like this would work, but I get a block validation error. It says that both the attributes were saved twice to both attribute values.

export default function save( { attributes } ) {
const blockProps = useBlockProps.save();
return (
    <div { ...blockProps }>
        <div>{ attributes.theNotes }</div>
        <div>{ attributes.theContact }</div>
    </div>
);
}

The error says:

Content generated by save function:

<div class="wp-block-create-block-editor-notes"><div>notesTestcontactTest</div><div>notesTestcontactTest</div></div>

Content retrieved from post body:

<div class="wp-block-create-block-editor-notes"><div>notesTest</div><div>contactTest</div></div>

The Getting Started Guide shows how to save one attribute called “message” like this. Apparently, I do not know what to do when I have multiple attributes to update:

import { useBlockProps } from '@wordpress/block-editor';

export default function save( { attributes } ) {
const blockProps = useBlockProps.save();
return <div { ...blockProps }>{ attributes.message }</div>;
}

Note: I asked this on stackOverflow and then realized that I should have reached out to this community.