Interactive Task Board with Drag and Drop Functionality

This challenge asks you to build a simple task board application using React and TypeScript, incorporating drag-and-drop functionality to move tasks between different columns. Such a system is useful for project management, to-do lists, or any application requiring visual organization of items. The goal is to create a functional and visually appealing interface where users can easily rearrange tasks.

Problem Description

You are tasked with creating a React component that represents a task board. The task board will consist of multiple columns, each representing a different status (e.g., "To Do", "In Progress", "Done"). Each column will contain a list of tasks, represented as draggable items. Users should be able to drag tasks from one column to another, effectively changing their status.

Key Requirements:

Columns: The task board must have at least three columns: "To Do", "In Progress", and "Done". These columns should be visually distinct.
Tasks: Each task should be represented as a draggable item. Each task should have a title (string).
Drag and Drop: Users should be able to drag tasks between columns. The drag-and-drop functionality should be smooth and intuitive.
State Management: The application should maintain the state of the tasks and their respective columns. When a task is dropped into a new column, the state should be updated accordingly.
Visual Feedback: Provide visual feedback during the drag operation (e.g., highlighting the target column).
TypeScript: The entire solution must be written in TypeScript.

Expected Behavior:

The application should render the task board with the initial set of tasks distributed across the columns.
When a user clicks and drags a task, the task should visually move as the user drags the mouse.
When a user drops a task over a column, the task should be added to that column.
The application's state should be updated to reflect the new position of the task.
The UI should re-render to display the updated task board.

Edge Cases to Consider:

Dragging a task onto the same column it already resides in.
Empty columns.
Large number of tasks (performance considerations).
Handling potential errors during drag and drop.

Examples

Example 1:

Initial State:
To Do: [Task 1, Task 2]
In Progress: [Task 3]
Done: [Task 4, Task 5]

Action: User drags Task 2 from "To Do" to "In Progress".

Output State:
To Do: [Task 1]
In Progress: [Task 3, Task 2]
Done: [Task 4, Task 5]

Example 2:

Initial State:
To Do: []
In Progress: [Task 1]
Done: [Task 2, Task 3]

Action: User drags Task 1 from "In Progress" to "Done".

Output State:
To Do: []
In Progress: []
Done: [Task 2, Task 3, Task 1]

Example 3: (Edge Case - Dragging to same column)

Initial State:
To Do: [Task 1]
In Progress: []
Done: []

Action: User drags Task 1 from "To Do" to "To Do".

Output State:
To Do: [Task 1]
In Progress: []
Done: []

Constraints

Dependencies: You are allowed to use React, TypeScript, and a drag-and-drop library of your choice (e.g., react-beautiful-dnd, react-dnd). Specify the library you choose.
Performance: The application should be reasonably performant, even with a moderate number of tasks (e.g., up to 50 tasks per column). Avoid unnecessary re-renders.
Input Format: Tasks are represented as simple objects with a title property (string).
Column Names: The column names must be "To Do", "In Progress", and "Done".
Time Limit: Aim to complete the challenge within 2-3 hours.

Notes

Consider using functional components and hooks for state management.
Think about how to efficiently update the state when a task is dropped.
Pay attention to accessibility considerations (e.g., keyboard navigation).
Focus on creating a clean and well-structured codebase.
You don't need to implement persistence (saving the task board data to local storage or a database). The focus is on the drag-and-drop functionality and state management within the React component.
Start with a basic implementation and gradually add features and improvements.