Add AccessibilityLater button story with a button (#3917)

This case is already present in a spec.tsx file but I also want it in a
storybook to better understand why my changes in the PoC branch broke
the accessibilityLater

## Description

Added storybook example

## Related Issue


## Motivation and Context

## How Has This Been Tested?

`npm run storybook`

## Screenshots (if appropriate):
<img width="953" alt="image"
src="https://github.com/recharts/recharts/assets/1100170/4571a95c-fc8e-4b1b-af50-eca6efb2a375">

## Types of changes

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

## Checklist:

- [X] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [ ] I have added tests to cover my changes.
- [X] I have added a storybook story or extended an existing story to
show my changes
- [X] All new and existing tests passed.

---------

Co-authored-by: Nikolas Rieble <nikolas-rieble@protonmail.com>

storybook/stories/Examples/ComposedChart/AccessibilityLayer.stories.tsx

@@ -1,6 +1,16 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { StoryObj } from '@storybook/react';
-import { ComposedChart, Area, ResponsiveContainer, Legend, Tooltip, XAxis, YAxis } from '../../../../src';
+import {
+  ComposedChart,
+  Area,
+  ResponsiveContainer,
+  Legend,
+  Tooltip,
+  XAxis,
+  YAxis,
+  AreaChart,
+  CartesianGrid,
+} from '../../../../src';
 import { pageData } from '../../data';
 import { General } from '../../API/props/CartesianComponentShared';
 import { getStoryArgsFromArgsTypesObject } from '../../API/props/utils';
@@ -45,3 +55,39 @@ export const AreaChartWithAccessibilityLayer: StoryObj = {
     },
   },
 };
+
+export const AccessibleWithButton = {
+  render: () => {
+    const [toggle, setToggle] = useState(true);
+
+    return (
+      <div>
+        <button type="button" onClick={() => setToggle(!toggle)}>
+          Toggle Tooltip
+        </button>
+
+        <AreaChart
+          width={500}
+          height={400}
+          data={pageData}
+          margin={{
+            top: 10,
+            right: 30,
+            left: 0,
+            bottom: 0,
+          }}
+          accessibilityLayer
+        >
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="name" />
+          <YAxis />
+          {toggle && <Tooltip />}
+          <Area type="monotone" dataKey="uv" stackId="1" stroke="#8884d8" fill="#8884d8" />
+          <Area type="monotone" dataKey="pv" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
+          <Area type="monotone" dataKey="amt" stackId="1" stroke="#ffc658" fill="#ffc658" />
+        </AreaChart>
+      </div>
+    );
+  },
+  args: {},
+};