how to fix this issue / TS2740: Type '{}' is missing the following properties from type 'Readonly ':

what are the solution that screenshot , how to do it
I want to know how to add component to App.tsx file

what are the solution that screenshot , how to do it
I want to know how to add component to App.tsx file

import React from 'react';

interface Message {

}

interface MyState {
    message?: string,
    userName?: string
}

class Message extends React.Component<Message, MyState> {

    constructor(props: Readonly<any> | any) {
        super(props);
        this.state = {
            message: 'welcome',
            userName: 'tashi'
        }
    }

    render() {
        return (
            <div>
                <h1>{this.state.message} {this.state.userName}</h1>
            </div>
        );
    }
}

export default Message;

import React from 'react';
import Greet from "./components/Greet";
import Message from "./components/Message";
import {Route, Routes} from "react-router-dom";

function App() {
    return (
<div className="App">
<Message/>
</div>
);
}

export default App;

It is because both the class and props type called Message, simply rename any one if it to something else and it should works:

interface MessageProps {

}

class Message extends React.Component<MessageProps, MyState> {

    constructor(props: Readonly<MessageProps> | MessageProps) {
        super(props);
        this.state = {
            message: 'welcome',
            userName: 'tashi'
        }
    }
    // ...
}

I also fix the type of constructor parameter to Readonly<MessageProps> | MessageProps