Current behaviour

When using the FAB.Group component from react-native-paper within an Expo project, a console warning is displayed:

LogBox.web.js:104 Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

This warning suggests that there's an issue with the nested structure of button elements within the FAB.Group component.

Expected behaviour

The FAB.Group component should render correctly without producing any DOM nesting warnings related to button elements.

How to reproduce?

Create a new Expo project using the provided minimal setup.
Implement a screen with a FAB.Group component as shown in the BugFABExample component.
Run the project on web (expo start --web).
Open the browser console to observe the warning.

Here's a simplified code snippet demonstrating the issue:

import * as React from "react";
import { View } from "react-native";
import { FAB, Portal } from "react-native-paper";

const BugFABExample = () => {
  const [open, setOpen] = React.useState(false);

  return (
    <View style={{ flex: 1 }}>
      <Portal>
        <FAB.Group
          open={open}
          visible
          icon={open ? "close" : "plus"}
          actions={[
            { icon: "star", onPress: () => {} },
            { icon: "email", onPress: () => {} },
          ]}
          onStateChange={({ open }) => setOpen(open)}
        />
      </Portal>
    </View>
  );
};

export default BugFABExample;

Preview

What have you tried so far?

• Verified that the issue occurs in a minimal Expo project setup.
• Confirmed that the warning is specific to the web platform.

Your Environment