match.params.id works in react-router-dom version5 but not in version 6

Whats the proper way to get this functionality in react-router version 6 When i console.log match it show undefined, but it works fine in v5

import React from 'react'

const NotePage = ({ match }) => {

    let noteId = match.params.id


    console.log(noteId)
    return (
        <div>
            <h1>detail Note {noteId} </h1>
        </div>
    )
}

export default NotePage

You need to use useParams hook in the component like below. I assume your path is /:id

import React from 'react'
import { useParams } from 'react-router-dom'

const NotePage = () => {

    const { id: noteId } = useParams()

    return (
        <div>
            <h1>detail Note {noteId} </h1>
        </div>
    )
}

export default NotePage