My tag from react-scroll seems to have no destination, but it is passed to it in code

Question

I am trying to make a smooth transition to my second panel of the page by making anchor, as I read on the internet the proper way to do this is by using react.scroll but after doing everything like on the internet my tag simply don't work, while inspecting it with the browser it shows and tag with no destination to go to.

my app comopnent is site in this project: `

import React, {Component} from 'react';
import Firstpanel from "./firstpanel";
import Secondpanel from "./secondpanel";
import Thirdpanel from "./thirdpanel";


class Site extends Component {
    render() {
        return (
            <div className={"h-screen snap-y snap-mandatory overflow-x-hidden"}>
                <div className={"snap-start bg-[url('../public/images/banner_cropped.png')] bg-dark-grey bg-blend-multiply bg-[length:100vw_100vh]  h-screen w-screen "}>
                    <Firstpanel></Firstpanel>
                    <Secondpanel></Secondpanel>
                    <Thirdpanel></Thirdpanel>
                </div>
            </div>
        );
    }
}

export default Site;

`

then my first panel: `

import React, {Component} from 'react';
import {Link} from "react-scroll";

class Firstpanel extends Component {
    render() {
        return (
            <section className={" w-screen h-screen flex justify-center items-center flex-col gap-20"}>
                <h1 className={"font-bold text-8xl text-beige select-none"}>Welcome to the coding world!</h1>
                <p className={"font-bold text-4xl text-beige select-none"}>This site is going to be my personal portfolio for future projects</p>
                <Link className={"w-16 h-16 rounded-full mt-12 animate-bounce"} to="sec" spy={true} smooth={true}>
                <div className={"rounded-full w-16 h-16 bg-[url('../public/images/second_white_arrow_down.png')] bg-cover cursor-pointer"} type="button">
                </div></Link>
            </section>
        );
    }
}

export default Firstpanel;

`

and my second panel: `

import React, {Component} from 'react';

class Secondpanel extends Component {
    render() {
        return (
            <section  className={"snap-start bg-dark-grey h-screen w-screen"}>
                <h1 id="home">Hi Paul</h1>
            </section>
        );
    }
}

export default Secondpanel;

`

I tried play with the react.scroll, but even after that it alwyas did nothing