Issues With Force:Input/OuputField

MCVE_Dynamic.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
	<aura:attribute name="record"
                    type="Opportunity"
                    default="{ 'sobjectType': 'Opportunity' }"/>
    <aura:attribute name="error"
                    type="String"/>
    <aura:attribute name="columns"
                    type="integer"
                    description="The number of columns"/>
    <aura:attribute name="fields"
                    type="List"
                    access="public"
                    description="Fields from the record"/>
    <force:recordPreview aura:id="recordHandler"
                         fields="Id,Name"
                         recordId="{!v.recordId}"
                         targetRecord="{!v.record}"
                         targetError="{!v.error}"/>
    <aura:dependency resource="markup://force:outputField" />
    <aura:handler name="change" value="{!v.record}" action="{!c.renderDetails}"/>
    {!v.body}
</aura:component>

MCVE_DynamicController.js

({
	renderDetails: function(component, event, helper){
        var record = component.get("v.record");
        if(record){
            var keys = Object.getOwnPropertyNames(record);
            for(var i = 0; i < keys.length; i++){
                if(keys[i] === "Name") {
                   var keyString = 'v.record.' + keys[i]; 
                    $A.createComponent(
                        "force:outputField",
                        {
                            "aura:id": keys[i],
                            "value": component.getReference(keyString)
                        },
                        function(newInput, status, errorMessage){
                            if (status === "SUCCESS") {
                                var body = component.get("v.body");
                                body.push(newInput);
                                component.set("v.body", body);
                            }
                            else if (status === "INCOMPLETE") {
                                console.log("No response from server or client is offline.")
                                // Show offline error
                            }
                            else if (status === "ERROR") {
                                console.log("Error: " + errorMessage);
                                // Show error message
                            }
                        }
                    );
                }
            }
        }
    }
})