Not bad for an assignment. Just going top to bottom:

App.tsx

You reference contacts before defining it. This works in JS because the declaration is hoisted, and the function referencing it doesn't get called until after contacts is initialized. Though it works, it's bad practice and can complicate debugging. I would move contacts to above App.

Not sure why you use an initializer function to initialize the selectedContact state. You can just initialize it directly like this: useState(contacts[0])

When initializing messages, you copy-paste the same IDs as in contacts. You should build it using the actual contacts instead, maybe something like this:

useState(
  contacts
    .map(contact => contact.id)
    .reduce(
      (acc, id) => {
        acc[id] = '';
        return acc;
      },
      /* initialValue= */ {}
    )
);

But it's bad practice to use numbers as object keys. Almost always an object key will be a string. For messages, you're better off keeping an array of objects like [{id: 0, message: ''}], or even using a Map.

In handleTextChange, you set the state using the previous state directly. In more complex applications, this can create race conditions where your state changes can overwrite each other. To avoid this, set this state using an updater function, like this:

setMessages(prevMessages => ({
  ...prevMessages,
  [selectedContact.id]: e.target.value,
}));

Chat.jsx

Your component doesn't need to know about the entire messages object. It clutters the information present and in more complex applications may cause unnecessary rerenders. Prefer accepting a single message and calling your component with messages[contact.id].

ContactList.jsx

When iterating contacts, for arrow functions that directly return a value, you can skip the braces and return. Like this:

{contacts.map((contact) => (
  <button ... >
    ...
  </button>
))}

This is the opposite case. When defining onClick, you expect handleButtonClick to return nothing. But this kind of usage can be dangerous if it unexpectedly returns a value. You should wrap the call in braces to make this explicit, like this:

onClick={(event) => {
  handleButtonClick(contact, event);
}}

Overall

Your code has stylistic inconsistencies and is missing some typical stylistic conventions for JS. For example:

• Trailing commas in some objects, not in others
• Semicolons in some places, not in others
• 2-space indents in some places, 4-space in others
• Whitespace separating some function declarations, not others
• Other inconsistent whitespace elsewhere

A good linter/formatter can fix most of these automatically. If you use VS Code, it should come by default.