JSFiddle - React, Tailwind, and code Playground

HTML

<div id="buttons">
    <button id="All" class="button selected">All</button>
    <button id="Men" class="button">Men</button>
    <button id="Women" class="button">Women</button>
</div>
<div id='ptchart'></div>

CSS

.brush rect.selection {
        fill: none;
        opacity: 1;
    }
    rect.handle{
        fill: #666;
    }

JavaScript

var json = [
    {
      "date": "2020-01-02",
      "gender": "Men",
      "value": 4320
    },
    {
      "date": "2020-01-02",
      "gender": "Women",
      "value": 984
    },
    {
      "date": "2020-01-15",
      "gender": "Men",
      "value": 4624
    },
    {
      "date": "2020-01-15",
      "gender": "Women",
      "value": 1005
    },
    {
      "date": "2020-02-03",
      "gender": "Men",
      "value": 5488
    },
    {
      "date": "2020-02-03",
      "gender": "Women",
      "value": 978
    },
    {
      "date": "2020-02-18",
      "gender": "Men",
      "value": 5842
    },
    {
      "date": "2020-02-18",
      "gender": "Women",
      "value": 1006
    },
    {
      "date": "2020-03-02",
      "gender": "Men",
      "value": 6925
    },
    {
      "date": "2020-03-02",
      "gender": "Women",
      "value": 1004
    },
    {
      "date": "2020-03-16",
      "gender": "Men",
      "value": 6132
    },
    {
      "date": "2020-03-16",
      "gender": "Women",
      "value": 948
    },
    {
      "date": "2020-04-01",
      "gender": "Men",
      "value": 5852
    },
    {
      "date": "2020-04-01",
      "gender": "Women",
      "value": 685
    },
    {
      "date": "2020-04-15",
      "gender": "Men",
      "value": 8697
    },
    {
      "date": "2020-04-15",
      "gender": "Women",
      "value": 497
    },
    {
      "date": "2020-05-01",
      "gender": "Men",
      "value": 4547
    },
    {
      "date": "2020-05-01",
      "gender": "Women",
      "value": 468
    }
]

var margin = { top: 30, right: 210, bottom: 110, left: 50 },
    margin2 = { top: 380, right: 200, bottom: 70, left: 50 },
    width = 1000 - margin.left - margin.right,
    height = 440 - margin.top - margin.bottom,
    height2 = 490 - margin2.top - margin2.bottom;

var x = d3.scaleTime().range([0, width]),
    x2 = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height, 0]),
    y2 = d3.scaleLinear().range([height2, 0]);

var xAxis =...