Recharts 3 areas continues each other

I need 3 areas continues each other. For the moment I have such a result, but I need these areas must be like one area chart and continue with each other.

Current code:

   <ResponsiveContainer width="99%" height={400}>
      <ComposedChart
        data={data}
        margin={{
          top: 20,
          right: 20,
          bottom: 50,
          left: 20,
        }}
      >
        <CartesianGrid stroke="#f5f5f5" />
        <XAxis dataKey="name" angle={-90} textAnchor="end" />
        <YAxis yAxisId="left" />
        <YAxis yAxisId="right" domain={[0, 100]} orientation="right" />
        <Tooltip />
        <Area
          type="monotoneY"
          dataKey={(item) => item.type === 'X' && item.amt}
          yAxisId="left"
          fill="rgba(74, 187, 133, 0.7)"
          stroke="rgba(74, 187, 133, 0.7)"
        />
        <Area
          type="monotoneY"
          dataKey={(item) => item.type === 'Y' && item.amt}
          yAxisId="left"
          fill="rgba(236, 169, 68, 0.7)"
          stroke="rgba(236, 169, 68, 0.7)"
        />
        <Area
          type="monotoneY"
          dataKey={(item) => item.type === 'Z' && item.amt}
          yAxisId="left"
          fill="rgba(215, 94, 94, 0.7)"
          stroke="rgba(215, 94, 94, 0.7)"
        />
        <Line type="monotone" dataKey="uv" yAxisId="right" stroke="#ff7300" />
      </ComposedChart>
    </ResponsiveContainer>