nivo Heatmap code

import React from 'react';
import { ResponsiveHeatMap } from '@nivo/heatmap';
import { AutoSizer } from 'react-virtualized';
// import AutoSizer from 'react-virtualized-auto-sizer';
// make sure parent container have a defined height when using
// responsive component, otherwise height will be 0 and
// no chart will be rendered.
// website examples showcase many properties,
// you'll often use just a few of them.

export default function NivoHeatMap({ props, data, loading, error, onClick }) {
  return (
    <div style={{ display: 'flex' }}>
      {/* <div style={{ flex: '1 1 auto', height: '100vh' }}> */}
      <div>
        <AutoSizer>
          {({ height, width }) =>
            !loading &&
            data && (
              <div height={height} width={width}>
                {height}, {width}
                <div style={{ height: 400 }}>
                  <ResponsiveHeatMap
                    onClick={onClick}
                    data={data.values}
                    keys={data.dedicatedAreaSet}
                    indexBy="floor"
                    margin={{
                      top: 100,
                      right: 60,
                      bottom: 60,
                      left: 60,
                    }}
                    forceSquare={false}
                    axisTop={null}
                    axisBottom={{
                      orient: 'bottom',
                      tickSize: 5,
                      tickPadding: 5,
                      tickRotation: 0,
                      legend: '전용면적',
                      legendPosition: 'middle',
                      legendOffset: 36,
                    }}
                    axisLeft={{
                      orient: 'left',
                      tickSize: 5,
                      tickPadding: 5,
                      tickRotation: 0,
                      legend: '층',
                      legendPosition: 'middle',
                      legendOffset: -40,
                    }}
                    colors="oranges"
                    cellOpacity={1}
                    cellShape="rect"
                    cellBorderColor="inherit:darker(0.4)"
                    labelTextColor="inherit:darker(1.8)"
                    // labelTextColor="#fff1fb"
                    defs={[
                      {
                        id: 'lines',
                        type: 'patternLines',
                        background: 'inherit',
                        color: 'rgba(0, 0, 0, 0.1)',
                        rotation: -45,
                        lineWidth: 4,
                        spacing: 7,
                      },
                    ]}
                    fill={[
                      {
                        id: 'lines',
                      },
                    ]}
                    animate={true}
                    motionStiffness={80}
                    motionDamping={9}
                    hoverTarget="cell"
                    cellHoverOthersOpacity={0.25}
                    sizeVariation={0.3}
                  />
                </div>
              </div>
            )
          }
        </AutoSizer>
      </div>
    </div>
  );
}