How to design nested dropdown using reactstrap

Question

For example consider the dropdown say A inside A I have A.1 and A.2 as items inside A.1 I have A.1.1 and A.2.2

this is the code i tried and this is the output. Actually A.1 is missing how to have both A.1 , A.2 and while clicking A.1 i should get A.1.1 and A.1.2 (basically A.1's items)

import React, { Component } from 'react'
import {DropdownItem, DropdownToggle, DropdownMenu, NavLink } from 'reactstrap';
import { UncontrolledDropdown} from "reactstrap";

 class Suma_form extends Component {
  constructor(props) {
    super(props)
  
  }
  render() {
    return (
    <div>
       <UncontrolledDropdown>
              <DropdownToggle caret nav>
                A
                </DropdownToggle>
              <DropdownMenu end>
              <DropdownToggle caret nav>
                A.1
                </DropdownToggle>
               
                
                <DropdownItem>
                  <NavLink href='/s'>A.1.1</NavLink>
                </DropdownItem>
                <DropdownItem>
                <NavLink href='/s'>A.1.2</NavLink>
                </DropdownItem>
                </DropdownMenu>
                
                <DropdownMenu end>
              <DropdownToggle caret nav>
                A.2
                </DropdownToggle>
               
                
                <DropdownItem>
                  <NavLink href='/s'>A.2.1</NavLink>
                </DropdownItem>
                <DropdownItem>
                <NavLink href='/s'>A.2.2</NavLink>
                </DropdownItem>
                </DropdownMenu>
                

             
           
                              
            
             
             </UncontrolledDropdown>
             
    </div>
    )
  }
 }

export default Suma_form