React - Nivo Charts - Chart not re-rendering when filtering

Question

I have created a reusable component for my app. The line chart can be used in multiple places and features a 'filter panel'. This allows the user to filter by months.

I have implemented this before with the Nivo bar chart and it works. I change the filter and the chart updates in real-time.

I have not been able to achieve this with the line chart. When I change the period the chart only shrinks in size. I.e. if I go from 1 year to 7 days the chart adjusts correctly, but then I cannot increase back to say 6 months.

export const LineChart = (props) => {

    const [period, setPeriod] = useState('3_MONTHS');

    let sevenDaysAgo = moment().subtract(7, 'days');
    let fourteenDaysAgo = moment().subtract(14, 'days');
    let monthAgo = moment().subtract(1, 'month');

    let newArray = [];
    props.data.filter((value, key) => {

        let newData = [];
        value.data.filter((value2, key) => {

            let date = moment(value2.x, 'DD MMM YYYY');
         
            if (period === 'ALL_TIME') {
                newData.push(value2);
            }
   else if (period === '7_DAYS' && date.isAfter(sevenDaysAgo)) {
                newData.push(value2);
            }
            else if (period === '14_DAYS' &&  date.isAfter(fourteenDaysAgo)) {
                newData.push(value2);
            }
            else if (period === '1_MONTH' && date.isAfter(monthAgo)) {
                newData.push(value2);
            }
        });

        value.data = newData;
        newArray.push(value);
    });

  
    return (
        <Box height="100%" width="100%">
    
                    <DropDown
                        dark={true}
                        placeholder="3 months"
                        options={[
                            { value: '1_MONTH', label: '1 month' },
                            { value: '14_DAYS', label: '14 days' },
                            { value: '7_DAYS', label: '7 days' },
                        ]}
                        onChange={(e, actionType) => {
                            setPeriod(e.value)
                        }}
                  />
                

            <ResponsiveLine data={newArray} />

        </Box>
    )


}