https://github.com/antoniolago/react-gauge-component

Learn from that link, and improve my gauge meter, because currently it sucks. Don't change the rest of the page, just the meter. And give me complete updated sentiment.js

import React from 'react';
import { Card, CardContent, Typography, Grid, Box } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    padding: theme.spacing(3),
  },
  mainCard: {
    marginBottom: theme.spacing(4),
  },
  meterContainer: {
    position: 'relative',
    width: 200,
    height: 100,
    margin: '0 auto 40px',
  },
  meterBackground: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    borderRadius: '100% 100% 0 0',
    background: 'conic-gradient(from 180deg, #ff0000 0deg 60deg, #ff7f00 60deg 120deg, #ffff00 120deg 180deg)',
    overflow: 'hidden',
  },
  meterForeground: {
    position: 'absolute',
    width: '80%',
    height: '80%',
    borderRadius: '100% 100% 0 0',
    background: 'white',
    top: '20%',
    left: '10%',
  },
  meterArrow: {
    position: 'absolute',
    width: '4px',
    height: '50%',
    background: 'black',
    bottom: '0',
    left: '50%',
    transformOrigin: 'bottom center',
    transform: 'translateX(-50%) rotate(0deg)',
    transition: 'transform 1s ease-out',
  },
  meterValue: {
    position: 'absolute',
    bottom: '-30px',
    left: '50%',
    transform: 'translateX(-50%)',
    fontSize: '1.5rem',
    fontWeight: 'bold',
  },
  meterLabels: {
    position: 'absolute',
    width: '100%',
    bottom: '-60px',
    display: 'flex',
    justifyContent: 'space-between',
    fontSize: '0.8rem',
    color: '#666',
  },
  headlineCard: {
    marginBottom: theme.spacing(3),
    boxShadow: '0 4px 10px rgba(0, 0, 0, 0.1)',
    borderRadius: '10px',
    overflow: 'hidden',
  },
  titleCard: {
    fontWeight: 'bold',
    color: '#333',
    borderBottom: `1px solid ${theme.palette.divider}`,
    paddingBottom: theme.spacing(1),
    marginBottom: theme.spacing(2),
  },
  commentCard: {
    marginBottom: theme.spacing(1),
    backgroundColor: '#f9f9f9',
    borderRadius: '8px',
    padding: theme.spacing(2),
  },
  commentText: {
    color: '#555',
  },
}));

const SentimentMeter = ({ value }) => {
  const classes = useStyles();
  const rotation = value * 1.8 - 90; // Rotate based on the value (0-100 maps to -90 to 90 degrees)

  return (
    <div className={classes.meterContainer}>
      <div className={classes.meterBackground} />
      <div className={classes.meterForeground} />
      <div
        className={classes.meterArrow}
        style={{
          transform: `translateX(-50%) rotate(${rotation}deg)`,
        }}
      />
      <Typography variant="h5" className={classes.meterValue}>
        {value}
      </Typography>
      <div className={classes.meterLabels}>
        <span>Negative</span>
        <span>Neutral</span>
        <span>Positive</span>
      </div>
    </div>
  );
};

const CommentCard = ({ comment }) => {
  const classes = useStyles();

  return (
    <Box className={classes.commentCard}>
      <Typography variant="body2" className={classes.commentText}>
        {comment}
      </Typography>
    </Box>
  );
};

const HeadlineCard = ({ headline, comments }) => {
  const classes = useStyles();

  return (
    <Card className={classes.headlineCard}>
      <CardContent>
        <Typography variant="h6" className={classes.titleCard}>
          {headline}
        </Typography>
        {comments.map((comment, index) => (
          <CommentCard key={index} comment={comment} />
        ))}
      </CardContent>
    </Card>
  );
};

const SentimentAnalysis = () => {
  const classes = useStyles();
  const sentimentValue = 30; // Example sentiment value

  const headlines = [
    {
      headline: "New Immigration Policy Sparks Debate",
      comments: [
        "This is going to put even more strain on our resources.",
        "We need to take care of our own citizens first.",
        "The job market can't handle this influx of newcomers.",
        "Our healthcare system is already overwhelmed.",
        "We're losing our cultural identity with these policies.",
      ],
    },
    {
      headline: "Housing Crisis Worsens Amid Immigration Surge",
      comments: [
        "How are locals supposed to afford homes now?",
        "The government needs to prioritize Canadian residents.",
        "This is driving up rent prices for everyone.",
        "We need to slow down immigration until we solve this crisis.",
        "It's becoming impossible for young Canadians to buy homes.",
      ],
    },
  ];

  return (
    <div className={classes.root}>
      <Card className={classes.mainCard}>
        <CardContent>
          <Typography variant="h4" gutterBottom align="center">
            Immigration Sentiment Analysis
          </Typography>
          <SentimentMeter value={sentimentValue} />
          <Typography variant="body1" paragraph align="center">
            Based on our AI-powered sentiment analysis of comments across various platforms,
            the current public sentiment towards immigration in Canada is relatively negative.
          </Typography>
          <Grid container spacing={3}>
            {headlines.map((item, index) => (
              <Grid item xs={12} md={6} key={index}>
                <HeadlineCard
                  headline={item.headline}
                  comments={item.comments}
                />
              </Grid>
            ))}
          </Grid>
        </CardContent>
      </Card>
    </div>
  );
};

export default SentimentAnalysis;