use Mapbox with D3, padding trouble

Question

I use Mapbox and D3 for weather in react

I use Mapbox flyto include padding like this

map.current.flyTo({
    center: bounds.getCenter(),
    zoom,
    essential: true,
    padding: { top: 200, bottom: 100, left: 50, right: 50 },
    duration: 2000,
});

after use this get map bound size

map.current.getBounds();

and d3 draw like this

enter image description here

How can I fixed ?

delete padding and set padding value include d3