React Frappe Charts: How to change chart type on click

Question

I have an application with a react frontend and I want to use Frappe charts to show some data. I have a Switch which changes the value on the chart from line to bar. The problem is that the chart doesnt rerender after this event is triggered (I think).

How do I make sure that the graph rerenders after the onChange event happens? The React code is included below. The switch makes the isToggled state go from true to false. The constant named type shows line if isToggled is true, and bar if isToggled is false. I passed the type constant in the type of the graph so that it would change the chart type. But this does not work.

import React, {useState, useEffect} from 'react';
import PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import 'frappe-charts/dist/frappe-charts.min.css'
import ReactFrappeChart from "react-frappe-charts";
import Switch from '@material-ui/core/Switch';


function LineChart(props) {
    const { window } = props;
   
    const theme = useTheme();
    const [mobileOpen, setMobileOpen] = React.useState(false);
    
    const [isToggled, setToggled] = useState(false);
   
    console.log(isToggled)
    
    const type = isToggled ? "bar": "line";
  
    return (
      <div>
        <Typography>This is a {type} chart</Typography>

        <ReactFrappeChart
        type= {type}
        colors={["#3D70B2"]}
        axisOptions={{ xAxisMode: "tick", yAxisMode: "tick", xIsSeries: 1 }}
        height={250}
        data={{
          labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          datasets: [
            { name: "dataset 1", values: [18, 40, 30, 35, 8, 52, 17, 4] },
            { name: "dataset 2", values: [12, 35, 32, 40, 4, 2, 15, 6] }
          
          ],
        }}
        
      />
      
      <Box component={Grid} item xs={12} display="flex" justify='space-between'>
      <Switch checked={isToggled} onChange={() => setToggled(!isToggled)}></Switch>
      </Box>
    </div>
    );
  }
  
  LineChart.propTypes = {
    window: PropTypes.func,
  };
  
  export default LineChart;