Auto scroll to last div on every button click event in React + Typescript

I am working on some application which we are developing in React + Typescript. In this I want to implement auto scroll functionality to last div. So I have some parent div in that I am adding child div based on data in my array of object. And I am adding data in that object on click of button. So whenever new data added into that object it will be visible in child component. And so accordingly scroll should go at the end of the div automatically.

I have tried some logic so according to that functionality is working but its scrolling to half of parent div but not to the end of it.

I am providing my code for reference.

ParentComponant.tsx
 
import { useRef, useEffect } from"react"
import { ChildComponant } from'./ChildComponant'
 
exportconst SearchResult = () => {
const myRef = useRef<null | HTMLDivElement>(null)
const [oldData, setOldData] = useEffect([])
 
const executeScroll = () => {
        myRef.current?.scrollIntoView()
    }
 
const addMoreData = () => {
let data = {
            id: 1,
            content: 'dummy content'
        }
let temp = [...oldData]
        temp.push(data)
        setOldData(temp)
        executeScroll()
    }
 
return (
        <div>
            <button onClick={addMoreData}>Click Me</button>
            <ChildComponant
                ref={myref}
                someData={oldData}
            />
        </div>
    )
}
 
ChildComponant.tsx
 
import React from'react'
 
interface dummyModel {
    id: number
    content: string
}
 
exportinterface ChildComponantProps {
    someData: dummyModel[]
}
 
exportconst ChildComponant = React.forwardRef<HTMLDivElement, ChildComponantProps>(({
    someData
}, ref) => {
 
return {
        <div>
            <div className="parent_div"> // We add content into this dynamically
            {someData.map((v,k) => {
                return (
                    <div className="child_div">
                        {v.content}
                    </div>
                )
            })
            }
            </div>
            <div ref={ref}></div>
        </div>
    }
})

So please help me to resolve this problem as I have tried lot of things but still its not getting resolved. Thanks in advance.

Solution

I have solved this problem by using following code.

Changes done inside calling function which is moving scroll at the bottom

const executeScroll = () => {
    if (myRef) {
      myRef.current?.scroll({ top: myRef.current?.scrollHeight, behavior: 'smooth' })
    }
  }

And at the JSX I only added ref to parent_div class inside child component and removed last empty div to which I was added ref previosuly.

This changes worked for me.