Animated FAB button has thick rectangular border inside it

### Current behaviour

I am using an Animated FAB button and for some reason it has this dark rectangular border inside it.

### Expected behaviour

I expected the Animated FAB button to just have the primary color on it, no shadow inside the button.

### How to reproduce?

1. Use this PaperTheme object:

```typescript
{
"colors": {
"primary": "rgb(169, 212, 115)",
"onPrimary": "rgb(31, 55, 0)",
"primaryContainer": "rgb(48, 79, 0)",
"onPrimaryContainer": "rgb(196, 241, 140)",
"secondary": "rgb(192, 203, 172)",
"onSecondary": "rgb(42, 51, 30)",
"secondaryContainer": "rgb(64, 74, 51)",
"onSecondaryContainer": "rgb(220, 231, 199)",
"tertiary": "rgb(160, 208, 203)",
"onTertiary": "rgb(0, 55, 52)",
"tertiaryContainer": "rgb(31, 78, 75)",
"onTertiaryContainer": "rgb(188, 236, 231)",
"error": "rgb(255, 180, 171)",
"onError": "rgb(105, 0, 5)",
"errorContainer": "rgb(147, 0, 10)",
"onErrorContainer": "rgb(255, 180, 171)",
"background": "rgb(27, 28, 24)",
"onBackground": "rgb(227, 227, 219)",
"surface": "rgb(27, 28, 24)",
"onSurface": "rgb(227, 227, 219)",
"surfaceVariant": "rgb(68, 72, 61)",
"onSurfaceVariant": "rgb(197, 200, 186)",
"outline": "rgb(143, 146, 133)",
"outlineVariant": "rgb(68, 72, 61)",
"shadow": "rgb(0, 0, 0)",
"scrim": "rgb(0, 0, 0)",
"inverseSurface": "rgb(227, 227, 219)",
"inverseOnSurface": "rgb(48, 49, 44)",
"inversePrimary": "rgb(68, 104, 19)",
"elevation": {
"level0": "transparent",
"level1": "rgb(34, 37, 29)",
"level2": "rgb(38, 43, 31)",
"level3": "rgb(43, 48, 34)",
"level4": "rgb(44, 50, 35)",
"level5": "rgb(47, 54, 37)"
},
"surfaceDisabled": "rgba(227, 227, 219, 0.12)",
"onSurfaceDisabled": "rgba(227, 227, 219, 0.38)",
"backdrop": "rgba(46, 50, 40, 0.4)"
}
}
```

provide this object to the `PaperProvider`'s `theme` prop.

2. Then I use the AnimatedFAB button like so:

```typescript
export default function Index() {
const colorScheme = useContext(ColorSchemeContext) ?? "dark";
const streak = 19; // TODO: get this via API

const bottomSheetRef = useRef(null);
const openBottomSheet = () => bottomSheetRef.current?.expand();

const [duration, setDuration] = useState(0);

const calcPercent = (duration: number) => Math.round((duration / 60) * 100);
const fabExtended = duration > 0;

return (












console.log('started meditation!')}
animateFrom={'right'}
renderToHardwareTextureAndroid={true}
iconMode={'dynamic'}
style={[styles.fab]}
variant='primary'
/>

{/* console.log('Pressed')}
/> */}



)
}

const styles = StyleSheet.create({
fab: {
position: 'absolute',
margin: 16,
right: 0,
bottom: 0,
},
});
```

### Preview

### What have you tried so far?

I tried these steps but none of them worked.

1. In the style prop, I tried to set elevation to 0.
2. I set `elevation.level3` color to `transparent` since that's used by the Animated FAB button.
3. I explicitly set `backgroundColor: 'red'` or some other color to troubleshoot but the border still remains.
4. I also tried using a regular FAB button but that renders correctly (which tells me this might an issue with the `Animated.View` component in here.
5. I tried to use `renderToHardwareTextureAndroid={true}`.
6. I tried to change the variant of the button, still remains.
7. Using Devtools is not helping. When I open devtools, the border disappears. When i restart the app, it appears again.

### Your Environment

| software | version
| --------------------- | -------
| ios | x
| android | 13
| react-native | 0.81.5
| react-native-paper | 5.14.5
| node | 22.16.0
| npm or yarn | 10.9.2 (npm)
| expo sdk | 54.0.31