Remove React native Ionicon vector icon border when Pressed

Question

I am learning react-native and want to use an Ionicon with a ripple effect on Android. When icon is placed inside a "Pressable" component and "android_ripple" property is used to create a ripple effect, a square border is observed when pressing the icon. However, it is not visible when "android_ripple" is removed.

Is there any way to see ripple effect only on the icon and not around it?

import { Pressable, StyleSheet } from "react-native";
import { Ionicons } from "@expo/vector-icons";

function IconButton({ icon, color, onPress }) {
  return (
    <Pressable
      onPress={onPress}
      android_ripple={{ color: "#ccc" }}
      style={({ pressed }) => (pressed ? styles.pressed : null)}
    >
      <Ionicons name={icon} size={24} color={color} />
    </Pressable>
  );
}

const styles = StyleSheet.create({
  pressed: {
    opacity: 0.7,
  },
});

export default IconButton;

Link for the effect as observed