I'm making a smooth scroll menu. The menu is a component and therefore in a seperate jsx file.

It looks like below:

const SideTabs = (props) => {

    const [value, setValue] = React.useState(0);

    const handleChange = (event, newValue) => {
      setValue(newValue);
    };

    console.log(value)

  return (
    <IconContainer>
            <Tabs
            orientation="vertical" //change
            value={value}
            onChange={handleChange}
        >

            <Tab icon={<SearchIcon />} label={value === 0 ? <Typography variant="subtitle3">Search</Typography>: ""}/>

            <Tab icon={<WorkIcon />} label={value === 1 ? <Typography variant="subtitle3">Role</Typography>: ""}/>

            <Tab icon={<AccountBoxIcon/>} label={value === 2 ? <Typography variant="subtitle3">People</Typography>: ""} />
            
            <Tab icon={<ViewCompactIcon/>} label={value === 3 ? <Typography variant="subtitle3">Build</Typography> : ""} />
        </Tabs>
    </IconContainer>
  )
};

However, I want it to smooth scroll using the id's from this.

const JobPost = () => {

    const [value, setValue] = React.useState(0);

    const handleChange = (event, newValue) => {
      setValue(newValue);
    };


  return (
      <PageDiv>
          <IconContainer>
            <SideTabs/>
          </IconContainer>

          <Navbar/>
        <InitialSearch_INPUT id="search"/>
        <Tstdiv id="role">
            hello
        </Tstdiv>
        <Tstdiv2 id="people">
            Hi
        </Tstdiv2>
        <Tstdiv3 id="build">
            Hell1
        </Tstdiv3>
      </PageDiv>
);
};

I will then link it internally from the original file using react scroll, similar to this:

<Link to="role" spy={true} smooth={true} offset={-40} duration={500}>
                    <Tab icon={<WorkIcon />} label={value === 0 ? <Typography variant="subtitle3">Role</Typography>: ""}/>
                </Link>

the reason why I can't do the above alone is because I need to set the value using React state AND scroll.

I am not sure how to do this but I believe it requires props.

Any ideas!

Regards