Here, my problem is, I got the value of range slider but now the problem is, the value which I getting is joint which means while I am printing it, it is like 2080 where 20 and 80 are separate values and while I am showing them on screen they are coming together and I want to separate the min and max value, and want to show on screen. here is the code for the same.

import styled from "styled-components"
import { Slider } from "@mui/material"
import { useState } from "react"

const Container = styled.div`
margin-top: 5px;
display: flex;
    background-color: #F0F0F0;
`
const Left = styled.div`
margin-top: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: white;
  margin-right: 9px;
`

const Texthead = styled.h3`
  margin-left: 30px;
  font-weight: 600;
  margin-top: 10px;
`
const Text = styled.h6`
  margin-left: 30px;
  font-weight: 400;
`
const Line = styled.hr`
    margin-top: 10px;
`
const SliderContainer = styled.div`
  width: 330px;
 display: flex;
 align-items: center;
 justify-content: center;
`

const ProductList = () => {

  const [val,setVal]= useState([20,80])
  const updateVal = (e,item)=>{
    setVal(item)
  }
  function valuetext(value) {
    return `${value}°C`;
  }
  const ival = val;
  const fval = setVal;

  return (
    <Container>
      <Left>
        <Texthead>Filters</Texthead>
        <Line />
        <Text>Price</Text>
        <SliderContainer>
          <Slider style={{width:"200px"}}
          value={val}
          max={100}
          onChange={updateVal}
          getAriaValueText={valuetext}
          valueLabelDisplay="auto"
          />
        </SliderContainer>
        
        <Line />
        <Text>{ival} </Text>
        <Text>Discout % </Text>
      </Left>
</Container>
     
}

export default ProductList

and I am adding the image so you can understand better what I want to convey [1]: https://i.stack.imgur.com/vbhow.png

and I want that 20 and 80 seprate