当我在React Native中按下按钮时，如何才能使svg图像的下边框改变？

import React, { useState } from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import Svg, { Rect } from 'react-native-svg';

const MyComponent = () => {
  const [borderColor, setBorderColor] = useState('black');

  const handleButtonPress = () => {
    // 在这里根据需要改变svg图像的下边框
    setBorderColor('red');
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={handleButtonPress}>
        <Svg width="100" height="100">
          <Rect
            x="10"
            y="10"
            width="80"
            height="80"
            fill="none"
            stroke={borderColor}
            strokeWidth="2"
          />
        </Svg>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default MyComponent;