React SVG Component Not Always Updating - reactjs

Question

I'm currently having an SVG object composed of a list of "blocks" that changes based on a Select selection. The problem that I have is that the shape of the blocks only appear to update when the number of blocks in the selected plan is different.
So, for example, if I start with PlanA and it consists of 2 blocks, selecting PlanB with 3 blocks will give me the result I expect. But if I then select PlanC that also has 3 blocks, the dimensions of these blocks doesn't change (though the accompanying text does).
An example for what I've done with the top level component:
const [planOptions, setPlanOptions] = useState([]); //would be filled with option info
const [selectedOption, setSelectedOption] = useState(null);
const [fullInfo, setFullInfo] = useState([]); //would contain the full selection of information
const [blocks, setBlocks] = useState([]);
<PlanChartArea
key={blocks}
blocks={blocks}
/>
function selectPlan(fullInfo, planVal) {
//get blocks by chosing correct plan and ignoring the initial "marker" element
let blockList = fullInfo.filter(elem => elem.plan == planVal && elem.point > 1);
//
////////
//----PERFORM TRANSFORMATIONS
////////
//
setBlocks(blockList);
}
const handleSelectChange = (option) => {
setSelectedOption(option);
var selection = option.value;
selectPlan(fullInfo, selection);
}
<Select
value={selectedOption}
placeholder="Select Plan..."
options={planOptions}
onChange={(e) => { handleSelectChange(e) }}
/>
And with the child component:
for (let i = 0; i < props.blocks.length; i++) {
blocksobj.push(<Block
key={i + "_bl"}
x1={props.blocks[i].x1pos}
x2={props.blocks[i].x2pos}
y1={props.blocks[i].y1pos}
y2={props.blocks[i].y2pos}
y0={y0}
maxYValue={maxYValue}
yLength={yLength}
/>);
blocktxt.push(<text
key={i + "_bt"}
x={asPercent(x1pos + 0.5 * (x2pos - x1pos))}
y={asPercent(y0 + 0.05 * yLength)}
fontWeight="bold"
dominantBaseline="auto"
textAnchor="middle"
>
{Math.round(props.blocks[i].value)/100}kg/min
</text>);
}
return (
<div style={{position:"parent", width:"100%", height:"100%"}}>
<svg width={asPercent(SVG_WIDTH)} height={asPercent(SVG_HEIGHT)}>
{blocksobj}
{blocktxt}
<XYAxis
xAxisLength={xLength}
yAxisLength={yLength}
ox={x0}
oy={y0}
/>
{xTickmarks}
{yTickmarks}
</svg>
</div>
);
I tried implementing the accepted solution from this question but to no effect. Perhaps this is because my state value is in the form of an Array? Any help would be much appreciated.