I created a reusable component for SvgIcon in react-native. I passed three props in it namely, icon, width and height. I also setup some default props in my component. The issue is that my component is picking default prop for icon but it is not picking default props for width and height. When I am passing width and height as props in my SvgIcon component, it is taking those props, but what I want is that I don't need to pass width and height props every single time. The width and height must be 24 by default.

import React from "react";
import PropTypes from "prop-types";
import defaultSvg from "@app/assets/svgs/check-logo-sm.svg";

const SvgIcon = ({ width, height, icon: Icon }) => {
  return <Icon width={width} height={height} />;
};

SvgIcon.defaultProps = {
  width: 24,
  height: 24,
  icon: defaultSvg,
};

export default SvgIcon;

SvgIcon.propTypes = {
  width: PropTypes.number,
  height: PropTypes.number,
  icon: PropTypes.func,
};

When I call the component as <SvgIcon icon={homeIcon} width={40} height={40} />, it works fine, but I want to call it as <SvgIcon icon={homeIcon} />, and want it to take its default width and height.