Emoji Reaction Button

Build a React component that displays an emoji reaction button with a dropdown emoji picker. The button should show the currently selected emoji and allow users to toggle the picker visibility to choose a different emoji.

Requirements

The component should implement the following behavior:

1. Initial State: Display a button showing a default emoji (😊) with the text "React"
2. Toggle Functionality: Clicking the button opens/closes an emoji picker dropdown
3. Emoji Selection: When a user selects an emoji from the picker, update the button to show the selected emoji and automatically close the dropdown
4. Outside Click: Clicking anywhere outside the button or picker should close the dropdown
5. Button Styling: The button should have a border, padding, and a cursor pointer

Implementation Details

Create a file src/EmojiReactionButton.tsx that exports a React component named EmojiReactionButton.

The component should:

• Manage the open/closed state of the picker internally
• Display the selected emoji on the button
• Position the emoji picker below the button when open
• Handle emoji selection events appropriately
• Close the picker when clicking outside

Test Cases

• When the button is clicked, the emoji picker appears @test
• When an emoji is selected, the button displays the new emoji @test
• When an emoji is selected, the picker closes automatically @test
• When clicking outside the picker, it closes @test

@generates

export function EmojiReactionButton(): JSX.Element;

Dependencies { .dependencies }

React { .dependency }

Core React library for building the component.

emoji-picker-react { .dependency }

Provides the emoji picker interface with open/close control.