Why is VSCode not indenting .js file properly?

I am doing tutorial about full stack web development with javascript and react on the front. I have very very litle knowledge of html and no knowledge on javascript and react beforehand.

I have recurring problem where I write code to .js file, but indentation seems to be messed up and causes things to not work properly. Otherwise code is perfect.

Here is example of what I wrote (that didin’t work).

import React, { Component } from 'react';

export default class RoomJoinPage extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <p>This is the Join Room page</p>
    }
}

Here is example of working code:

import React, { Component } from "react";

export default class RoomJoinPage extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <p>This is the room join page</p>;
  }
}

I get that indentation has to be done properly, but why vscode does not indent these correct automatically? Am I to learn writing code in .js files so that I first backspace improper indent and then double tap space to make it right? What am I missing here?