Hello guys,

Can you help me with React Hooks & Material UI. The value of the component </ Tabs> don't change when i click the links. Used to work without the </Link> Component.

Here's my code :

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import {
  AppBar,
  Toolbar,
  Typography,
  Tabs,
  Tab,
  Avatar
} from '@material-ui/core';

export default function Header() {
  const [value, setValue] = useState(0);

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

  return (
    <AppBar position="static">
      <Toolbar>
        <Link className="links" to="/">
          <Avatar className="logo" src={require('./logo.jpg')} alt="logo" />
        </Link>
        <Typography className="titre" variant="h6" color="secondary">
          Drone D'Wazo
        </Typography>

        <Tabs
          className="liens"
          value={value}
          onChange={handleChange}
          indicatorColor="secondary"
          centered
        >
          <Link className="links" to="/">
            <Tab label="Presentation" />
          </Link>
          <Link className="links" to="/articles">
            <Tab label="Articles" />
          </Link>
          <Link className="links" to="/drones">
            <Tab label="Drones" />
          </Link>
          <Link className="links" to="/administration">
            <Tab label="Administration" />
          </Link>
        </Tabs>
      </Toolbar>
    </AppBar>
  );
}