вывести массив объектов react

Помогите пожалуйста, почему в компоненте MessageList 2 раза выводит в консоль props? И как вывести list в App ?

class App extends React.Component {
    state = {}


    handleCallback = (message) => {
        this.setState({message})
    }

    render() {
        return (
            <div>
                <MessageList props={this.state}/>
                <Message parentCallback={this.handleCallback}/>
            </div>
        )
    }
}

export default App;

export class Message extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text: ' ',
            author: 'Author'
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange = (event) => {
        this.setState({text: event.target.value, author: "Author"});
    }

    handleSubmit = (event) => {
        alert('Сочинение отправлено: ' + this.state.text + this.state.author);
        this.props.parentCallback(this.state);
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Сочинение:
                    <textarea name = "text" value={this.state.text} onChange={this.handleChange}/>
                </label>
                <input type="submit" value="Отправить" />
            </form>
        );
    }
}

export const MessageList = (props) => {
    console.log(props)
    const [list, setList] = useState([]);
    useEffect(() => {
        setList([...list, props])
    }, [props]);
    return (
        list.map((item) => <p>key = {item.text}>{item.author}</p>),
            <p>Hello! </p>
    )
}