I am using react with typescript. I have one external JSON file from which I am getting data to create elements on my front end. I have one button also when the user enables that button then only elements should create otherwise do nothing but my map function is not working.

Here is my code:

import Button from '../Button/Button';
import { useState } from 'react';
import Box from './Box';

const jsonObj = require("./Helpers/dataList.json");

type JsonData = {
    index: number,
    x: number,
    y: number,
    width: number,
    height: number,
  }
  
  type JData = {
    index: number,
    indexData: JsonData[]
  }

 const updateIndex = () => {
            let cIndex: number = ...;
            setCurrentIndex(cIndex);
        }
    }

const Test = () => {
    const [currentIndex, setCurrentIndex] = useState(0);
    const [boxFlag, setBoxFlag] = useState(false);
    const [boxText, setBoxText] = useState("Show Box");

    const showBoxes = () => {
        if(!boxFlag){
            setBoxText("Disable Box");
        }
        else{
            setBoxText("Show Box");
        }
        setBoxFlag(!boxFlag);
    }

  return <div className='container'>
        <div>
        {boxFlag &&
                jsonObj.map((x: JData) => {
                    if(currentIndex === x.index){
                        x.indexData.map((y: IData) => {
                            <Box x={y.x} y={y.y} height={y.height} width={y.width}/>
                        })
                    }
                })
        }
      </div>
          <Button name={boxText} onClick={showBoxes}/>
  </div>;
};

export default Test;

and my JSON file:

[
  { "index": 8, "x": 1141, "y": 582, "width": 238, "height": 268 },
  { "index": 8, "x": 265, "y": 572, "width": 291, "height": 317},
  { "index": 8, "x": 1665, "y": 491, "width": 266, "height": 323 }
 
]