How to show a single polygon on react-leaflet as I am able to draw the whole shapefile data on React Leaflet

Question

I am Using React Leaflet for showing some GeoJSON data and I have successfully added geojson layer to react leaflet with . That GeoJSON layer contains a shapefile with polygons and multipolygons. Now I wanted to show a single polygon from that shapefile and have API and that single polygon is working fine on Leaflet with Jquery. But in React Leaflet polygon is not showing when I use and if I try to show that single polygon in it shows a random small triangular polygon at random in map. It is not picking up on Single Polygon. I am asking here as official react-leaflet repo mentioned to ask questions like this with tags here.

Here's my code

import React, { useState, useEffect } from 'react'
import {Map as LeafletMap, TileLayer,Circle,CircleMarker,Popup,LayersControl,FeatureGroup,Polygon,GeoJSON} from 'react-leaflet'

import Axios from 'axios';
import "./Map.css"

function Map({center, zoom}) {
  const { BaseLayer, Overlay } = LayersControl
  const [Districts, setDistrict] = useState([])
  const [Singal, setSingal] = useState([])

  useEffect(() => {
    Axios.get('http://127.0.0.1:8000/geo/detail/1')
      .then(response => {
        console.log(response.data.features[0].geometry.coordinates)
        setSingal(response.data.features[0].geometry.coordinates)
        })
    },[])
  return (
  <div className="map">
    <LeafletMap center={center} zoom={zoom} doubleClickZoom={true} animate={true} duration={100} bounceAtZoomLimits={true} maxBoundsViscosity={0.95} maxBounds={[[-360, -180], [360, 180]]}  >
      <LayersControl position="topright">
        <BaseLayer name="OpenStreetMap">
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
        </BaseLayer>
        <BaseLayer checked={true} name="Dark">
          <TileLayer
              url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png"
          />
        </BaseLayer>
        <Overlay checked={true} name="poly">
          <FeatureGroup>
            <GeoJSON color="purple" data={Single}/>
            <Polygon color="red" positions={Single}/>
          </FeatureGroup>
        </Overlay>
        <Overlay name="Circle">
        <Circle center={center} fillColor="blue" radius={500} />
        </Overlay>
        <Overlay name="Marker with popup">
        <CircleMarker center={[51.51, -0.12]} color="red" radius={20}>
          <Popup>Popup in CircleMarker</Popup>
        </CircleMarker>
        </Overlay>
      </LayersControl>
    </LeafletMap>
  </div>
  )
}

export default Map

I get my shapefile to work by simply doing this

setDistrict(response.data.features)

(
  Districts.map((District) => (
  <GeoJSON key={District.id} color="red" data={District}/>  
  ))

but i am unable to show a single polygon separately from the very same shapefile

My Complete Shapefile JSON is very long so i am not posting it here but it has feature property in JSON which got picked my but single Polygon json look like this and not working.

{"id":1,"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[74.0413436889649,33.79899215698242],[74.01819610595703,33.819572448730526],[74.00099945068354,33.83676147460943],[73.99336242675793,33.85204315185558],[73.97808074951183,33.87878799438482],[73.97617340087902,33.89598083496094],[73.97043609619152,33.90553283691406],[73.95515441894537,33.9036216735841],[73.93796539306646,33.894069671630916],[73.92076873779297,33.87688064575201],[73.8978500366211,33.87496948242182],[73.882568359375,33.87496948242182],[73.86537170410168,33.87496948242182],[73.83863067626964,33.87496948242182],[73.81952667236334,33.87496948242182],[73.78705596923828,33.87496948242182],[73.76412963867188,33.87688064575201],[73.73547363281261,33.88069915771479],[73.71446228027355,33.894069671630916],[73.6838989257813,33.92463684082037],[73.65142059326172,33.95711135864258],[73.63232421875,33.976211547851676],[73.60939788818371,33.9857635498048],[73.58647155761724,33.976211547851676],[73.5731048583985,33.95328903198242],[73.56928253173834,33.934188842773494],[73.5520858764649,33.91317367553722],[73.5409545898437,33.90389633178711],[73.5409927368164,33.906906127929744],[73.53636169433605,33.921367645263786],[73.53323364257818,33.927909851074276],[73.51795959472662,33.94833755493164],[73.51322937011724,33.95560455322277],[73.49691009521484,33.97720718383795],[73.49163055419928,33.98332214355469],[73.50196075439459,34.024394989013786],[73.51313781738281,34.04160308837896],[73.50847625732433,34.065528869628906],[73.49790954589844,34.1002769470216],[73.49443054199219,34.12512207031256],[73.51483917236328,34.124656677246094],[73.51737976074224,34.12369155883795],[73.52437591552734,34.119621276855526],[73.53223419189453,34.11486053466808],[73.54186248779308,34.110855102539176],[73.55504608154308,34.10977172851557],[73.56648254394543,34.11006164550787],[73.57705688476562,34.1103248596192],[73.584945678711,34.108398437500114],[73.59455871582031,34.10368728637701],[73.60157775878918,34.10174179077154],[73.6112670898438,34.10269165039074],[73.62712860107433,34.10450744628912],[73.64035034179688,34.106258392333984],[73.6474380493164,34.10997009277344],[73.65715789794922,34.11304855346691],[73.66425323486334,34.117477416992244],[73.6713256835938,34.1204833984375],[73.67266082763678,34.121051788330135],[73.72682952880865,34.11981201171881],[73.72937011718761,34.11840438842785],[73.73724365234375,34.114356994628906],[73.74334716796875,34.11026000976568],[73.75297546386724,34.106258392333984],[73.76239776611322,34.105911254882926],[73.76728820800787,34.102149963378906],[73.78758239746094,34.085708618164176],[73.80748748779303,34.06693267822271],[73.82436370849621,34.057331085205135],[73.84214782714844,34.059837341308594],[73.85387420654303,34.05952072143555],[73.8579483032226,34.05722045898443],[73.86845397949219,34.05253219604498],[73.87634277343756,34.049896240234375],[73.88333129882812,34.0465354919433],[73.8898086547851,34.0424041748048],[73.89817047119152,34.032821655273494],[73.90898895263678,34.03253936767578],[74.00000000000011,34.03018951416027],[74.00607299804693,34.02244186401373],[74.03890228271496,34.02910995483404],[74.04405975341808,34.0297203063966],[74.05665588378918,34.03124618530285],[74.06107330322277,34.034709930419865],[74.08702850341791,34.037761688232365],[74.09591674804693,34.04032135009777],[74.10046386718756,34.04562759399414],[74.11498260498053,34.05378341674799],[74.12369537353516,34.055179595947266],[74.12688446044916,34.05426406860357],[74.1324462890625,34.05267333984381],[74.14922332763672,34.04302597045904],[74.16142272949219,34.03887176513672],[74.1814346313476,34.039566040039176],[74.19635009765625,34.040084838867244],[74.21467590332031,34.03855514526367],[74.2255630493164,34.03340148925787],[74.23722076416021,34.02553176879894],[74.24652862548828,34.01602935791021],[74.24868774414068,34.013820648193416],[74.26274108886719,33.9742889404298],[74.2632522583009,33.95523071289074],[74.26358032226568,33.942619323730526],[74.26112365722668,33.92479705810547],[74.24555969238281,33.89500045776373],[74.21967315673834,33.86717605590826],[74.20762634277344,33.85940170288097],[74.19227600097668,33.851421356201115],[74.17008972167974,33.83988952636719],[74.14334106445312,33.830139160156364],[74.12979888916016,33.827560424804744],[74.09001159667974,33.82627868652355],[74.06572723388672,33.820098876953125],[74.05276489257818,33.81134033203131],[74.04904937744152,33.80883026123047],[74.0413436889649,33.79899215698242]]]]},"properties":{}}