Why is my JavaScript object property inaccessible, when it IS, in fact, defined?

Here is the object. It is a second-level object in the data tree:

user: {
  userId: 3,
  username: 'aragorn',
},

My React component is destructuring its parent object and making it available to the entire component. When I render the full user object using this code:

<p className="small">
  {`Submitted by ${JSON.stringify(user)}`}
</p>

I get a complete stringified object with all of user's properties:

Complete object renders in string form

When I try to access only the 'username' property from the 'user' object:

<p className="small">
  {`Submitted by ${JSON.stringify(user.username)}`}
</p>

I get this error:

TypeError: Cannot read property 'username' of undefined

Have you ever faced this weird issue before?

For further study, here is the full data object. This is coming from a mock data object being exported from a neighboring file in the same app. No network requests to a backend or anything, so there shouldn't be any async stuff going on here (I may be wrong):

{
title: "The Hefalump's Tale",
page: '32',
line: '1',
author: 'Joni E. Driskill',
genre: 'Sci-fi',
type: 'Motivational',
content: 'The grass is greener on the other side, unless, in actuality and reality, it is not. I guess in that case, you can just give up on anything nice in life.',
claps: 23,
id: 4,
user: {
  userId: 3,
  username: 'aragorn',
},
comments: [
  {
    commentId: 0,
    quoteId: 0,
    content: 'Comment content',
    userId: 'userId',
    claps: 2,
    date: 2,
  },
  {
    commentId: 1,
    quoteId: 1,
    content: 'Comment content',
    userId: 'userId',
    claps: 4,
    date: 1,
  },
  {
    commentId: 2,
    quoteId: 2,
    content: 'Comment content',
    userId: 'userId',
    claps: 12,
    date: 0,
  },
],

},

And HERE is my React component, called 'Meta,' bringing in the 'quote' object as a prop. The primary line in question is toward the bottom, but feel free to look at my props destructuring, too, if you like:

import React from 'react';
import Clap from '../mechanics/Clap';
import Report from '../mechanics/Report';

const Meta = ({
  quote: {
    content,
    title,
    author,
    page,
    line,
    genre,
    type,
    claps,
    id,
    user,
  },
}) => (
  <div className="discussion-meta mb2">
    <h1>&ldquo;{content}&rdquo;</h1>
    <hr />
    <div className="columns is-spaced-around pb3 text-align-left">
      <div className="column">
        <h3>{title}</h3>
        <p>
          <small>by {author}</small>
        </p>
        {page ?
          <p>
            <small>page {page}{line ? `, line ${line}` : ''}</small>
          </p>
          : null
        }
      </div>
      <div className="column text-align-right">
        <p>
          <span className="tag-purple small">{genre}</span>
        </p>
        <p>
          <span className="tag-green small">{type}</span>
        </p>
      </div>
    </div>
    <div className="columns">
      <div className="column">
        <p className="small">
          {`Submitted by ${JSON.stringify(user.username)}`}
        </p>
      </div>
    </div>
    <div className="columns">
      <div className="column">
        <Clap claps={claps} />
      </div>
      <div className="column">
        <Report id={id} />
      </div>
    </div>
  </div>
);

export default Meta;

I've recreated in CodeSandbox, and it works! WTF! https://codesandbox.io/s/4q9nlywl1x