Why does the error in react seem unmatched with the code?

I'm trying to create a clone of stack overflow, and since I made changes in two files the page just went blank and I got this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at PostItem (PostItem.component.jsx:55:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)

Before these changes, it was showing up fine. Here's the code of PostItem:

import React from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {Link} from 'react-router-dom';

import htmlSubstring from '../../services/htmlSubstring'
import injectEllipsis from '../../services/injectEllipsis'

import UserCard from '../UserCard/UserCard.component';
import TagBadge from '../TagBadge/TagBadge.component';

import './PostItem.styles.scss';

const PostItem = ({
  post: {
    id,
    title,
    body,
    username,
    gravatar,
    user_id,
    answer_count,
    comment_count,
    views,
    created_at,
    tags,
  },
}) => {
  const answerVoteUp = (
    <div className='vote answer'>
      <span className='vote-count fc-green-500'>{answer_count}</span>
      <div className='count-text'>answers</div>
    </div>
  );

  const answerVoteDown = (
    <div className='vote'>
      <span className='vote-count'>{answer_count}</span>
      <div className='count-text'>answers</div>
    </div>
  );

  return (
    <div className='posts'>
      <div className='stats-container fc-black-500'>
        <div className='stats'>
          <div className='vote'>
            <span className='vote-count'>{comment_count}</span>
            <div className='count-text'>comments</div>
          </div>
          {answer_count > 0 ? answerVoteUp : answerVoteDown}
          <div className='vote'>
            <span className='vote-count'>{tags.length}</span>
            <div className='count-text'>tags</div>
          </div>
          <div className='vote'>
            <div className='count-text'>{views} views</div>
          </div>
        </div>
      </div>
      <div className='summary'>
        <h3>
          <Link to={`/questions/${id}`}>{title}</Link>
        </h3>
        <div className='brief' dangerouslySetInnerHTML={{__html: injectEllipsis(htmlSubstring(body, 200))}}></div>
        {tags.map((tag, index) => (
          <TagBadge key={index} tag_name={tag.tagname} size={'s-tag'} float={'left'} />
        ))}
        <UserCard
          created_at={created_at}
          user_id={user_id}
          gravatar={gravatar}
          username={username}
          float={'right'}
          backgroundColor={'transparent'}
        />
      </div>
    </div>
  );
};

PostItem.propTypes = {
  post: PropTypes.object.isRequired,
};

export default connect(null)(PostItem);

Even when I remove this line <span className='vote-count'>{tags.length}</span> it still shows me the same error, even though there's not any mention of property length in the code. Besides this, I'm also getting a 401 error:

xhr.js:210          GET http://localhost:5000/api/auth 401 (Unauthorized)

What can be the problem here? I've tried restarting the entire program (with backend) and also removing all the changes I did before these errors came up.