React native svg transformer does not color svg using replaceAttrValues

Question

I'm trying to color a svg using react-native-svg-transformer and react-native-svg but it does not work. I have the impression that the file .svgrrc is not taken into consideration because wether I change its content or even I delete it it does not change anything.

I made sure to carefully follow the configuration steps described in the react-native-svg-transformer doc and created a metro.config.js witht the code given in the doc.

SVG file

<svg width="5988" height="4684" viewBox="0 0 5988 4684" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="5988" height="4684" fill="#f01"/>
<rect x="3144" y="200" width="2644" height="4284" fill="#000"/>
<path d="M3174 200H3593L3383.5 1895.5L3174 200Z" fill="#f01"/>
<path d="M3607 200H4026L3816.5 1895.5L3607 200Z" fill="#ff1"/>
<path d="M4040 200H4459L4249.5 1895.5L4040 200Z" fill="#f01"/>
<path d="M4473 200H4892L4682.5 1895.5L4473 200Z" fill="#ff1"/>
<path d="M4906 200H5325L5115.5 1895.5L4906 200Z" fill="#f01"/>
<path d="M5339 200H5758L5548.5 1895.5L5339 200Z" fill="#ff1"/>
<path d="M3593 4483.5H3174L3383.5 2788L3593 4483.5Z" fill="#f01"/>
<path d="M4026 4483.5H3607L3816.5 2788L4026 4483.5Z" fill="#ff1"/>
<path d="M4459 4483.5H4040L4249.5 2788L4459 4483.5Z" fill="#f01"/>
<path d="M4892 4483.5H4473L4682.5 2788L4892 4483.5Z" fill="#ff1"/>
<path d="M5325 4483.5H4906L5115.5 2788L5325 4483.5Z" fill="#f01"/>
<path d="M5758 4483.5H5339L5548.5 2788L5758 4483.5Z" fill="#ff1"/>
<rect x="200" y="200" width="2644" height="4284" fill="#000"/>
<path d="M230 200H649L439.5 1895.5L230 200Z" fill="#f01"/>
<path d="M663 200H1082L872.5 1895.5L663 200Z" fill="#ff1"/>
<path d="M1096 200H1515L1305.5 1895.5L1096 200Z" fill="#f01"/>
<path d="M1529 200H1948L1738.5 1895.5L1529 200Z" fill="#ff1"/>
<path d="M1962 200H2381L2171.5 1895.5L1962 200Z" fill="#f01"/>
<path d="M2395 200H2814L2604.5 1895.5L2395 200Z" fill="#ff1"/>
<path d="M649 4483.5H230L439.5 2788L649 4483.5Z" fill="#f01"/>
<path d="M1082 4483.5H663L872.5 2788L1082 4483.5Z" fill="#ff1"/>
<path d="M1515 4483.5H1096L1305.5 2788L1515 4483.5Z" fill="#f01"/>
<path d="M1948 4483.5H1529L1738.5 2788L1948 4483.5Z" fill="#ff1"/>
<path d="M2381 4483.5H1962L2171.5 2788L2381 4483.5Z" fill="#f01"/>
<path d="M2814 4483.5H2395L2604.5 2788L2814 4483.5Z" fill="#ff1"/>
</svg>

Component

<SVGBoard width={300} height={300} primary='#5A391A' secondary='#FFFFFF' tertiary='#000000' quaternary='#6CC6BB'/>

.svgrrc file

{
  "replaceAttrValues": {
    "#000": "{props.primary}",
    "#f01": "{props.secondary}",
    "#ff1": "{props.tertiary}",
    "#f00": "{props.quaternary}"
  }
}

However, for another svg file and component that has only one color, like...

<svg width="40" height="100" viewBox="0 0 40 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 0L40 100H0L20 0Z" fill="#000"/>
</svg>

<Triangle fill='green'/>

... it successfully changes the fill color to the one specified by the fill prop.