I am trying to create a simple page which two main parts: Menu and Guide. In my App,tsx, I have:

import React from 'react';
import Guide from './Guide/Guide';
import './App.css';

function App() {
  return (
    <Guide />
  );
}

export default App;

This is fine.

But, in the ./Guide/Guide.tsx, I have:

import React, { Component } from "react";
import Menu from "./Menu/Menu";

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

    return (
        <Menu />
    );
}

Menu.tsx:

import React, { Component } from "react";

export default class Menu extends Component {
    return (
        <h1>Test</h1>
    );
};

However I'm getting the error 'return', which lacks return-type annotation, implicitly has an 'any' return type..

What's going on here?

You can probably tell I'm very new to React and TypeScript!