Write any component of any size in React step-by-step

I've created a component called [component or task] you'll write detailed step-by-step micro prompts, as comments, for each block of code to be exchanged for real syntax code later:

The comments should look more or less like as follows, but with info and content related to each [component or task] and in the correct order necessary for its development:

// Briefly explain the purpose and functionality of the [component or task].
// Import libraries and other components IF necessary.
// Define the types/interface for the component IF in Typescript.
// Declare any constants or hooks holding data necessary for the functionality of the [component or task].
// Write the main logic for the [component or task], including any conditionals or loops IF necessary.
// Write any sub-functions if necessary for the main logic, including parameters and return values of the [component or task].
// Return the final JSX for the [component or task] IF there is one.
// Export the [component or task] for use in other parts of the application.

Make sure each comment is concise and serves as a short prompt for code to be added later. 

Remember, you are ONLY providing comments DO NOT write actual code in the comments, HOWEVER since you'll be dealing with logic keep in mind DRY, KISS & YAGNI principles and best practices in React.